CSS Grid 指南

CSS Grid 是一种用于在网页上创建复杂布局的强大工具。它允许你以网格的形式排列元素，从而实现更加灵活和响应式的页面设计。

基本概念

CSS Grid 由以下几个基本概念组成：

容器（Container）：使用 display: grid; 或 display: grid-template-columns; 和 display: grid-template-rows; 属性创建的元素。
项目（Item）：容器内的所有子元素都是项目。
网格线（Grid Line）：水平网格线和垂直网格线将容器分割成网格。
网格单元格（Grid Cell）：网格线的交叉点形成的区域。

创建网格

要创建一个网格，你需要设置容器的 display 属性为 grid，并定义网格的列和行。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
}

在上面的代码中，我们创建了一个两列的网格，其中第一列占1份空间，第二列占2份空间。

网格定位

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

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

在上面的代码中，.item1 被放置在第一列和第二列之间，以及第一行和第三行之间。

响应式设计

CSS Grid 支持响应式设计，你可以使用 grid-template-columns 和 grid-template-rows 的 fr 单位来创建响应式网格。

.container {
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

在上面的代码中，当屏幕宽度小于600px时，网格将变为单列布局。

扩展阅读

想要了解更多关于 CSS Grid 的信息，请阅读以下文章：