css grid案例
时间: 2024-06-08 16:03:31 浏览: 14
CSS Grid布局提供了一种强大的方式来创建复杂的网格布局。下面是一个简单的CSS Grid示例,它创建了一个两列三行的网格:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 两列,每列占据1/2的可用空间 */
grid-template-rows: auto; /* 自动填充行高 */
gap: 10px; /* 行与行之间的间隔 */
padding: 10px;
}
.grid-item {
background-color: #f2f2f2;
padding: 20px;
border: 1px solid rgba(0, 0, 0, 0.1);
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
</div>
</body>
</html>
```
在这个例子中,`.grid-container`是网格容器,`.grid-item`是网格单元格。每个`.grid-item`都会自动适应其列宽,并且按照列的顺序排列。
相关推荐
![xmind](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)