网格布局（Grid Layout）是一种用于在网页中创建复杂布局的CSS技术。它允许开发者通过定义行和列来创建复杂的布局结构。

基本概念

  • 容器（Container）：网格布局的容器指的是应用了 display: grid 或 display: inline-grid 的元素。
  • 网格项（Grid Item）：容器内的子元素称为网格项。
  • 行（Row）：容器内的水平区域。
  • 列（Column）：容器内的垂直区域。

创建网格

要创建一个网格，只需在容器元素上设置 display: grid 属性。例如：

.container {
  display: grid;
}

网格项定位

可以使用 grid-column 和 grid-row 属性来定位网格项。例如：

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

上面的代码将 .item1 网格项放置在第1列到第3列之间，以及第1行到第2行之间。

网格间距

可以使用 grid-gap 属性来设置网格的行间距和列间距。例如：

.container {
  grid-gap: 10px;
}

示例链接

想要了解更多关于网格布局的信息，可以访问CSS Grid Layout。

<center><img src="https://cloud-image.ullrai.com/q/grid_basics/" alt="grid_basics"/></center>