design/css-grid-layout

CSS Grid 布局是一种强大的布局方式，它允许你以更灵活和高效的方式设计网页布局。下面是一些关于 CSS Grid 布局的要点。

CSS Grid 布局基础

• 容器 (Container): 使用 display: grid; 或 display: grid-template-columns / grid-template-rows; 声明一个容器。
• 项目 (Item): 容器中的所有元素都是项目。
• 网格线 (Grid Line): 网格线是网格的垂直和水平线。
• 网格单元格 (Grid Cell): 网格线交叉的区域称为网格单元格。

布局属性

• grid-template-columns: 定义列的尺寸和数量。
• grid-template-rows: 定义行的尺寸和数量。
• grid-column: 定义项目的列位置。
• grid-row: 定义项目的行位置。

实例

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

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

图片示例

CSS Grid 布局示例

扩展阅读

想了解更多关于 CSS Grid 布局的细节？请访问我们的CSS Grid 布局教程页面。

CSS Grid 布局为网页设计带来了新的可能性，希望这篇文章能帮助你更好地理解和使用它。