css grid网格布局（栅格布局）图解+代码详细讲解【收藏】

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属性定义了各个项目在网格中的位置。