css/grid_layout

CSS Grid 布局是一种强大的布局方式，它允许开发者以更灵活的方式排列网页元素。以下是一些关于 CSS Grid 布局的要点：

基本概念

• 容器（Container）：使用 display: grid; 或 display: grid-template-columns; 等属性创建的元素。
• 项目（Item）：容器中的所有子元素，默认情况下，所有项目都是直接孩子。

布局属性

• grid-template-columns 和 grid-template-rows：定义网格的列和行。
• grid-column 和 grid-row：定义项目的位置。
• grid-template：同时定义列和行的模板。

实例

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

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

在上面的例子中，.container 是一个网格容器，它有两列，第一列占 1 个单位，第二列占 3 个单位。

扩展阅读

想要了解更多关于 CSS Grid 的信息，可以阅读本站的CSS Grid 教程。

CSS Grid 布局示例