写一个Grid布局的例子
时间: 2023-08-25 20:16:53 浏览: 42
好的,以下是一个简单的 Grid 布局的例子,包含两行,每行两个元素:
HTML 代码:
```
<div class="grid-container">
<div class="item1">元素1</div>
<div class="item2">元素2</div>
<div class="item3">元素3</div>
<div class="item4">元素4</div>
</div>
```
CSS 代码:
```
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
.item1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.item2 {
grid-row: 1 / 2;
grid-column: 2 / 3;
}
.item3 {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.item4 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
```
在上面的代码中,通过 `display: grid` 将 `.grid-container` 容器设置为 Grid 布局,并通过 `grid-template-columns` 和 `grid-template-rows` 属性定义了两行两列的网格布局。
然后,通过 `grid-row` 和 `grid-column` 属性来指定每个元素所在的行和列。例如,`item1` 元素的 `grid-row` 属性设置为 `1 / 2`,表示它占据第一行,`grid-column` 属性设置为 `1 / 2`,表示它占据第一列。其他元素的设置类似。
最后,通过 `grid-gap` 属性设置行和列之间的间隔大小。