CSS Grid 布局CSS Grid 布局是 CSS3 引入的一种强大的二维布局系统，为我们构建复杂而灵活的网页布局提

CSS Grid 布局是 CSS3 引入的一种强大的二维布局系统，为我们构建复杂而灵活的网页布局提供了极大便利

1. 什么是 CSS Grid 布局

CSS Grid 布局是一个专门用于创建二维布局的系统。与传统的布局方式（如 Flexbox 主要用于一维布局）不同，Grid 可以同时控制行和列，帮助我们更直观地构建复杂的网页结构。利用 Grid，我们可以轻松实现如下布局效果：

复杂的报表或仪表板
多列响应式布局
网格画廊和产品展示页面

2. CSS Grid 的基本概念

网格容器与网格项

网格容器：通过设置 display: grid 或 display: inline-grid 的元素。它作为整个网格布局的父容器，定义了网格的行和列。
网格项：位于网格容器内部的直接子元素。每个网格项会自动放入由 Grid 定义的单元格中。

行与列的定义

使用 grid-template-columns 和 grid-template-rows 属性来定义网格容器的行和列。可以使用固定宽度（如 px）、百分比、fr 单位或 auto 进行定义。

示例：

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr;
  grid-template-rows: 50px 100px;
}

上例中，网格容器被划分为三列和两行，分别具有不同的尺寸。

3. 常用的 CSS Grid 属性

3.1 grid-template-columns / grid-template-rows

这些属性定义了网格的列和行的数量以及各自的尺寸。

.container {
  grid-template-columns: repeat(3, 1fr);  /* 三列均分空间 */
  grid-template-rows: 100px auto;           /* 第一行固定 100px，第二行自适应 */
}

3.2 grid-gap / gap

用于设置网格项之间的间隙，可以同时定义行间距和列间距。

.container {
  grid-gap: 20px;  /* 行间距和列间距均为 20px */
}

3.3 grid-column / grid-row

用于定义网格项跨越的列数或行数，可以精确控制网格项在网格中的位置。

.item {
  grid-column: 2 / 4;  /* 从第 2 列到第 3 列（不含第 4 列） */
  grid-row: 1 / 3;     /* 从第一行到第二行 */
}

3.4 grid-template-areas

允许通过命名区域来定义网格布局，语义化更强，布局更加直观。

.container {
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

这种方法可以清晰地规划页面的布局区域，并且便于后续样式管理和维护。

CSS Grid 布局

目录