CSS 网格容器：构建响应式网页布局的强大工具

CSS 网格容器：构建响应式网页布局的强大工具

CSS 网格布局（Grid Layout）是一种强大的布局方法，它允许我们创建复杂的网页布局，而无需使用浮动或定位。在 CSS 网格布局中，一个容器元素被设置为网格容器，其子元素则成为网格项。网格容器负责定义网格的结构，包括行和列的尺寸、网格项的位置等。

理解 CSS 网格容器

CSS 网格容器是通过将一个元素的 display 属性设置为 grid 或 inline-grid 来创建的。一旦一个元素成为网格容器，它的直接子元素就会自动成为网格项（grid items）。

.container {
  display: grid;
  /* 或 */
  display: inline-grid;
}

网格线（Grid Lines）

网格容器内部由水平和垂直的网格线分隔成多个网格单元格（grid cells）。这些网格线不仅可以用来定位网格项，还可以用来定义网格的轨道（tracks），即行和列。

网格轨道（Grid Tracks）

网格轨道是网格线之间的空间，可以是列或行。我们可以通过 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。

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