CSS 网格布局是一种强大的布局系统，可以简化并且高效地创建复杂的布局。以下是一个简单的网格布局示例：
HTML:
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>CSS:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 创建三个相等宽度的列 */
grid-gap: 10px; /* 设置网格之间的间隙 */
grid-auto-rows: minmax(100px, auto); /* 设置网格的最小高度为100px，允许自动增长 */
padding: 10px;
}
.item1 {
grid-column: 1 / 3; /* item1占据第一列的前两个网格 */
grid-row: 1;
}
.item2 {
grid-column: 3; /* item2占据第三列的全部网格 */
grid-row: 1 / 3;
}
.item3 {
grid-column: 1;
grid-row: 2;
}
.item4 {
grid-column: 2;
grid-row: 2;
}
.item5 {
grid-column: 3;
grid-row: 2;
}这个示例创建了一个具有三列和两行的网格布局。.item1 占据第一行的前两个网格，.item2 跨越第一列的全部高度并占据第三列，.item3 和 .item4 各自占据第二行的两个网格。这个布局使用了网格线的概念，可以非常灵活地定义网格中项目的位置和大小。