5分钟教你学会 CSS Grid 布局

下面是详细的“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;
}