css Grid网格布局-CFANZ编程社区

CSS Grid布局是一种强大的二维布局系统，它允许你创建复杂的网页布局，并且能够轻松地控制行和列的大小、位置以及对齐方式。Grid布局提供了比Flexbox更高级的功能，特别适用于需要精确控制行和列的设计。

基本概念

Grid容器：通过设置display: grid;或display: inline-grid;来定义一个元素为Grid容器。
Grid线：网格中的行和列之间的分界线。
Grid单元格：由两条相邻的行线和两条相邻的列线所围成的空间。
Grid区域：由一个或多个单元格组成的矩形区域。
Grid轨道：一行或一列称为一个轨道。

主要属性

Grid容器属性

display
- grid：块级网格容器。
- inline-grid：内联网格容器。
grid-template-columns 和 grid-template-rows
- 定义网格的列宽和行高。可以使用长度单位（如px, em）、百分比或fr单位（分数）。
- 例如：
```
.container {
  display: grid;
  grid-template-columns: 100px 1fr 200px;
  grid-template-rows: 100px 1fr 200px;
}
```

grid-template-areas

使用命名区域来定义布局。

例如：

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

grid-gap (已废弃, 使用gap代替)
- 设置行和列之间的间距。
- 例如：
```
.container {
  gap: 10px;
}
```

justify-items 和 align-items

控制项目在单元格内的水平和垂直对齐方式。

例如：

.container {
  justify-items: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

justify-content 和 align-content

控制整个网格在容器内的水平和垂直对齐方式。

例如：

.container {
  justify-content: center; /* 水平居中 */
  align-content: center; /* 垂直居中 */
}

grid-auto-columns 和 grid-auto-rows
- 定义隐式创建的轨道的大小。
- 例如：
```
.container {
  grid-auto-columns: 100px;
  grid-auto-rows: 50px;
}
```

grid-auto-flow

控制自动放置的算法。

例如：

.container {
  grid-auto-flow: row; /* 默认值，按行排列 */
  grid-auto-flow: column; /* 按列排列 */
  grid-auto-flow: dense; /* 尽可能紧密地填充空隙 */
}

Grid项目属性

grid-column 和 grid-row

定义项目的起始和结束位置。

例如：

.item {
  grid-column: 1 / 3; /* 从第1条列线到第3条列线 */
  grid-row: 1 / 3; /* 从第1条行线到第3条行线 */
}

grid-area

使用命名区域或行/列索引来定义项目的大小和位置。

例如：

.item {
  grid-area: 1 / 1 / 3 / 3; /* 等同于上面的grid-column和grid-row */
  grid-area: header; /* 如果使用了grid-template-areas */
}

justify-self 和 align-self
- 控制单个项目在单元格内的水平和垂直对齐方式。
- 例如：
```
.item {
  justify-self: end; /* 水平靠右 */
  align-self: start; /* 垂直靠上 */
}
```

示例代码

基本的网格布局

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列等宽 */
  grid-template-rows: 100px 1fr 100px; /* 三行，中间行自适应高度 */
  gap: 10px; /* 项目间间距 */
}

.header, .footer {
  background-color: lightblue;
}

.sidebar, .content {
  background-color: lightgreen;
}

使用命名区域

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 100px 1fr 100px;
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: lightblue;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
}

.content {
  grid-area: content;
  background-color: lightyellow;
}

.footer {
  grid-area: footer;
  background-color: lightpink;
}

自动布局

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.item {
  background-color: lightblue;
  padding: 20px;
}