html网格布局四列三行
时间: 2024-01-05 07:20:29 浏览: 39
以下是使用HTML网格布局创建四列三行的示例:
```html
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 四列 */
grid-template-rows: repeat(3, 1fr); /* 三行 */
gap: 10px; /* 单元格之间的间距 */
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
<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 class="grid-item">单元格 10</div>
<div class="grid-item">单元格 11</div>
<div class="grid-item">单元格 12</div>
</div>
```
这段代码创建了一个名为`grid-container`的容器,其中包含12个名为`grid-item`的单元格。通过设置`grid-template-columns`和`grid-template-rows`属性,我们可以指定容器的列数和行数。在这个例子中,我们将容器划分为四列和三行。每个单元格都有相同的样式,并且通过`gap`属性设置了单元格之间的间距。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)