CSS Grid 网格布局介绍- 技术博客

Grid 网格布局是 CSS 中一种强大的布局系统，它允许开发者以二维网格的形式来布局页面内容。与传统的布局方法（如浮动、定位和弹性盒子布局）相比，Grid 布局提供了更直观和灵活的方式来创建复杂的布局结构。

容器（Container）：通过将元素的 display 属性设置为 grid 或 inline-grid，可以将其定义为网格容器。这个容器的所有直接子元素将自动成为网格项（Grid Items）。
```
.container {
  display: grid;
}
```
网格线（Grid Lines）：网格线是构成网格结构的分界线，可以是水平的或垂直的。网格线用于定义网格的行和列。
轨道（Track）：轨道是两条相邻网格线之间的空间，可以是行轨道或列轨道。
单元格（Cell）：单元格是网格中的一个最小单位，由行和列的交叉区域形成。
区域（Area）：区域是由一个或多个相邻的单元格组成的矩形区域。

你可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。

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

在这个例子中，网格有三列和两行。第一列宽度为 100px，第二列宽度为 200px，第三列宽度为自动调整。第一行高度为 50px，第二行高度为 100px。

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

.item {
  grid-column: 1 / 3; /* 从第1列到第3列 */
  grid-row: 1; /* 第1行 */
}

在这个例子中，.item 将跨越第1列到第3列，并位于第1行。

你可以使用 grid-gap 属性来设置网格项之间的间距。

.container {
  grid-gap: 10px;
}

grid-gap 是 grid-row-gap 和 grid-column-gap 的简写形式。

命名网格线：你可以为网格线命名，以便更直观地引用它们。

.container {
  grid-template-columns: [start] 100px [middle] 200px [end];
}

命名网格区域：你可以使用 grid-template-areas 属性来定义命名的网格区域。

.container {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header {
  grid-area: header;
}

自动布局：Grid 布局支持自动布局算法，可以通过 grid-auto-flow 属性来控制网格项的自动排列方式。
```
.container {
  grid-auto-flow: row dense;
}
```
对齐和分布：Grid 布局提供了丰富的对齐和分布选项，如 justify-items、align-items、justify-content 和 align-content 等。

Grid 布局在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge。对于不支持 Grid 布局的旧版浏览器，可以使用 CSS 特性检测（如 @supports）来提供回退方案。

Grid 布局是 CSS 中一种非常强大的布局工具，特别适合用于创建复杂的二维布局。通过灵活的行列定义、网格项放置和对齐控制，开发者可以轻松实现各种复杂的页面布局需求。掌握 Grid 布局将极大地提升你的前端开发能力。

CSS Grid 网格布局介绍