5分钟教你学会 CSS Grid 布局

下面是详细的“5分钟教你学会 CSS Grid 布局”的攻略。

什么是 CSS Grid 布局？

CSS Grid 布局是一种二维网格布局系统，可以用于快速创建复杂的布局，同时具有灵活性和可响应性。

如何使用 CSS Grid 布局？

1. 创建网格容器

要使用 CSS Grid 布局，首先需要为网格容器设置 display 属性为 grid。

.container {
  display: grid;
}

2. 定义行和列网格

可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列的大小、数量和比例。

.container {
  display: grid;
  grid-template-rows: 100px 200px 50px; /* 定义三个行网格，高度分别为 100px、200px、50px */
  grid-template-columns: repeat(3, 1fr); /* 定义三个列网格，宽度平均分配 */
}

3. 放置网格元素

可以使用 grid-row 和 grid-column 属性来指定元素在网格中的位置。

.item {
  grid-row: 1 / 3; /* 元素跨越第一和第二行 */
  grid-column: 2 / 4; /* 元素跨越第二和第三列 */
}

4. 设定网格间距

可以使用 grid-row-gap 和 grid-column-gap 属性来为行和列之间设置间距。

.container {
  display: grid;
  grid-row-gap: 20px; /* 行间距为 20px */
  grid-column-gap: 10px; /* 列间距为 10px */
}

示例1：简单的两列布局

下面是一个简单的两列布局示例，左侧为导航栏，右侧为主体内容。

<div class="container">
  <div class="nav">导航栏</div>
  <div class="main">主体内容</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
}

.nav {
  background-color: #f0f0f0;
}

.main {
  background-color: #fff;
}

示例2：流式布局

下面是一个流式布局示例，可以随着窗口大小改变而自适应布局。

<div class="container">
  <div class="header">头部</div>
  <div class="sidebar">侧栏</div>
  <div class="main">主体内容</div>
  <div class="footer">底部</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 头部和侧栏为固定宽度，主体和底部为自适应宽度 */
  grid-template-rows: auto 1fr auto; /* 头部和底部为自适应高度，侧栏和主体为铺满高度 */
  grid-gap: 20px;
}

.header {
  height: 100px;
  background-color: #333;
  color: #fff;
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
}

.main {
  background-color: #fff;
}

.footer {
  height: 50px;
  background-color: #777;
  color: #fff;
}