CSS 网格

简介

CSS 网格（Grid）是 CSS 中一项强大的布局工具，它为网页提供了一个灵活的布局系统，可以轻松地创建复杂的网页布局，而无需使用繁琐的定位或浮动。

CSS 网格利用网格（grid）的概念来排版网页，它允许我们将网页内容按照行和列进行划分，并对每个单元格进行定位、对齐和调整大小。

CSS 网格可以非常适合响应式设计，可以自适应不同的屏幕大小和设备类型。

开始使用

容器定义

要使用 CSS 网格，首先需要在网页中定义一个网格容器。可以使用 display: grid 来定义一个网格容器。

.container {
  display: grid;
}

行与列定义

通过设置网格容器的 grid-template-rows 和 grid-template-columns 属性，来定义网格的行和列。

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr); /* 三行，每行高度为 1fr */
  grid-template-columns: repeat(3, 1fr); /* 三列，每列宽度为 1fr */
}

网格单元格

在网格容器中的每一个 HTML 元素都成为一个网格单元格。可以使用 grid-row 和 grid-column 属性，来对单元格进行定位。

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.item {
  grid-row: 1 / 2; /* 从第一行到第二行 */
  grid-column: 1 / 3; /* 从第一列到第三列 */
}

网格线

在网格容器中，我们可以定义一些网格线（grid line），它们类似于一个网格中的刻度线，可以用来对单元格进行定位。

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 10px; /* 行间距为 10px */
  grid-column-gap: 10px; /* 列间距为 10px */
}

/* 定义了一条水平网格线和一条垂直网格线 */
.container {
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];
}

实例

下面的示例演示了如何使用 CSS 网格来创建一个基本的网格布局。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.item {
  background-color: #f2f2f2;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

效果如下：

总结

CSS 网格是一个强大的布局工具，可以帮助我们轻松地创建复杂的网页布局。它的核心思想是将网页内容划分为行、列和单元格，并通过定义网格容器的属性来对每个单元格进行定位、调整大小和对齐。

使用 CSS 网格可以使得网页布局更加灵活、可读性更高，并且可以适应不同的屏幕大小和设备类型。所以，如果你希望创建一个现代化、响应式的网页，那么 CSS 网格绝对是一项值得学习的技能。