display: grid;
时间: 2023-07-04 12:17:41 浏览: 52
`display: grid;` 是 CSS 中的一种布局方式,它可以将一个元素的子元素划分为行和列,从而形成一个网格布局。使用 `display: grid;` 可以在不使用任何框架或插件的情况下,轻松地创建各种复杂的布局。以下是一个简单的例子:
HTML代码:
```
<div class="container">
<div class="box1">元素1</div>
<div class="box2">元素2</div>
<div class="box3">元素3</div>
<div class="box4">元素4</div>
</div>
```
CSS代码:
```
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 100px 200px;
grid-gap: 10px;
}
.box1 {
background-color: #FFC0CB;
}
.box2 {
background-color: #ADD8E6;
}
.box3 {
background-color: #90EE90;
}
.box4 {
background-color: #FFA07A;
}
```
以上代码中,`.container` 是一个 `display: grid;` 的容器,它的子元素会被划分为行和列。`grid-template-columns` 和 `grid-template-rows` 属性用于指定网格的列数和行数,这里的意思是容器中有两列,第一行高度为 100px,第二行高度为 200px。`grid-gap` 属性用于指定网格之间的间距。`.box1`、`.box2`、`.box3` 和 `.box4` 是容器中的子元素,它们将被按照顺序放到网格中。
以上代码将会把容器分成两列,第一行高度为 100px,第二行高度为 200px,然后将四个子元素按照顺序放到网格中,最终形成一个四个格子的网格布局。