使用div和grid布局实现九宫格
时间: 2023-07-12 22:07:41 浏览: 101
可以使用如下的HTML和CSS代码实现九宫格布局:
```html
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
```
```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
padding: 10px;
background-color: #ddd;
}
.grid-item {
background-color: #fff;
border: 1px solid #ccc;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
```
这里使用了 `display: grid` 和 `grid-template-columns`、`grid-template-rows` 属性来创建一个 3x3 的网格布局,`gap` 属性用于设置格子之间的间隔,`padding` 属性用于设置整个容器内边距。每个格子使用 `display: flex` 和 `align-items`、`justify-content` 属性来使其中内容垂直居中和水平居中。
阅读全文