CSS Grid 教程

CSS Grid 是一种用于在网页上创建复杂布局的布局系统。它提供了一种简单而强大的方式来创建网格布局，使得网页设计变得更加灵活和高效。

基本概念

• 容器（Container）：使用 display: grid; 或 display: grid-template; 的元素。
• 项目（Item）：容器内部的元素。
• 网格线（Grid Line）：定义网格的列和行。
• 网格单元格（Grid Cell）：网格线的交叉点。

布局属性

• grid-template-columns：定义网格的列。
• grid-template-rows：定义网格的行。
• grid-column：定义项目的列。
• grid-row：定义项目的行。

实例

假设我们有一个容器，我们需要在其中创建三列和两行：

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

然后，我们可以将项目放置在网格中：

.item1 { grid-column: 1; grid-row: 1; }
.item2 { grid-column: 2; grid-row: 1; }
.item3 { grid-column: 3; grid-row: 1; }
.item4 { grid-column: 1; grid-row: 2; }
.item5 { grid-column: 2; grid-row: 2; }
.item6 { grid-column: 3; grid-row: 2; }

资源

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

[center][Golden_Retriever]