玩转grid基础用法，让布局更轻松

前端

2023-09-05 09:00:29

网格布局已成为响应式设计的基石，而grid基础用法则是理解网格布局的关键。掌握grid基础用法，你可以轻松创建出灵活的、响应式的布局。

grid基础用法：

设置容器为网格布局

要使用网格布局，您首先需要将容器设置为网格布局。可以使用CSS的display属性来做到这一点：
```
.container {
  display: grid;
}
```
定义网格的行和列

要定义网格的行和列，可以使用CSS的grid-template-columns和grid-template-rows属性。这两个属性都可以接受一个字符串值，字符串中的每个值代表一行的宽度或一列的高度。

例如，以下代码将容器划分为两列，每列的宽度都为200px：
```
.container {
  display: grid;
  grid-template-columns: 200px 200px;
}
```
您还可以使用百分比值来定义行的宽度或列的高度。例如，以下代码将容器划分为两列，第一列的宽度为20%，第二列的宽度为80%：
```
.container {
  display: grid;
  grid-template-columns: 20% 80%;
}
```
将元素放置在网格中

要将元素放置在网格中，可以使用CSS的grid-column和grid-row属性。这两个属性都可以接受一个字符串值，字符串中的每个值代表元素在网格中的位置。

例如，以下代码将元素放置在第一行第一列：
```
.element {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
```
您还可以使用百分比值来指定元素的位置。例如，以下代码将元素放置在第一行，从第二列开始，元素的宽度为80%：
```
.element {
  grid-column: 2 / span 80%;
  grid-row: 1 / 2;
}
```
调整网格的间距

可以使用CSS的grid-gap属性来调整网格的间距。该属性可以接受一个值或两个值。一个值代表行和列的间距，两个值分别代表行间距和列间距。

例如，以下代码将网格的行间距和列间距都设置为10px：
```
.container {
  display: grid;
  grid-gap: 10px;
}
```
创建嵌套网格

可以使用CSS的subgrid属性来创建嵌套网格。该属性可以接受一个字符串值，字符串中的每个值代表一个嵌套网格。

例如，以下代码将在第一行第一列创建一个嵌套网格，嵌套网格的列宽为100px：
```
.container {
  display: grid;
  grid-template-columns: 200px 200px;
}

.subgrid {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: grid;
  grid-template-columns: 100px 100px;
}
```