CSS Grid 网格布局是一种强大的布局系统，可以创建各种复杂的布局结构。以下是一个简单的 CSS Grid 布局示例：
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); /* 3列，每列占用1/3空间 */
grid-gap: 10px; /* 网格间隙 */
grid-auto-rows: minmax(100px, auto); /* 行高最小100px，自动增长 */
}
.item1 {
grid-column: 1 / 3; /* 占据第1列至第2列的位置 */
grid-row: 1; /* 占据第1行的位置 */
}
.item2 {
grid-column: 3; /* 占据第3列的位置 */
grid-row: 1 / 3; /* 占据第1行至第2行的位置 */
}
.item3 {
grid-column: 1; /* 占据第1列的位置 */
grid-row: 2; /* 占据第2行的位置 */
}
.item4 {
grid-column: 2; /* 占据第2列的位置 */
grid-row: 2; /* 占据第2行的位置 */
}
.item5 {
grid-column: 3; /* 占据第3列的位置 */
grid-row: 3; /* 占据第3行的位置 */
}这个示例创建了一个具有3列和3行的网格布局，.item1占据第一行的前两列，.item2跨越第一列和中间行的前两个格子，.item3和.item4各占据其它位置。.item5则占据最后一行的第三列。通过grid-template-columns和grid-template-rows属性定义了网格的结构，通过grid-column和grid-row属性定义了各个项目在网格中的位置。