使用网格布局排列图片3*3
时间: 2023-12-03 18:45:31 浏览: 29
可以使用网格布局的 `grid-template-rows` 和 `grid-template-columns` 属性来排列图片3*3,以下是一个示例代码:
HTML代码:
```
<div class="grid-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
<img src="image6.jpg" alt="Image 6">
<img src="image7.jpg" alt="Image 7">
<img src="image8.jpg" alt="Image 8">
<img src="image9.jpg" alt="Image 9">
</div>
```
CSS代码:
```
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* 三行,每行占据剩余空间的1/3 */
grid-template-columns: repeat(3, 1fr); /* 三列,每列占据剩余空间的1/3 */
grid-gap: 10px; /* 图片之间的间距 */
}
img {
max-width: 100%; /* 图片宽度不超过其容器的宽度 */
height: auto; /* 图片高度自适应 */
}
```
这样就可以将9张图片按照3*3的网格布局排列显示了。