CSS Grid 简介

CSS Grid 是一种用于在网页上创建复杂布局的强大工具。它允许开发者以二维的方式布局网页元素，使得网页设计更加灵活和高效。

基本概念

• 容器 (Container): 使用 display: grid; 或 display: inline-grid; 声明的元素。
• 项目 (Item): 容器内的所有子元素。
• 网格线 (Grid Line): 容器内的水平线和垂直线，用于分隔网格区域。
• 网格区域 (Grid Cell): 由交叉的网格线形成的区域。

布局方式

• 单列/单行布局：仅使用一行或一列网格线。
• 多列/多行布局：使用多行和/或多列网格线。
• 网格模板 (Grid Template)：定义网格线的位置和大小。

代码示例

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

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

.item2 {
  grid-column: 2;
  grid-row: 1;
}

扩展阅读

更多关于 CSS Grid 的信息，请访问我们的 CSS Grid 教程。

CSS Grid 示例