CSS3中的display:grid网格布局介绍 flex升级版grid

CSS3中的display: grid是一个强大的布局工具，它提供了一个二维网格布局系统，使得我们可以更加灵活和直观地创建复杂的布局。display: grid是Flexbox布局模型的一个升级版本，它提供了更多的功能和灵活性。

以下是一个简单的display: 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: auto 1fr; /* 定义两列，第一列自动宽度，第二列占据剩余空间 */
  grid-template-rows: 50px 100px; /* 定义两行，第一行50px，第二行100px */
  grid-gap: 10px; /* 网格间隙 */
}
 
.item1 {
  grid-column: 1; /* 占据第一列 */
  grid-row: 1; /* 占据第一行 */
}
 
.item2 {
  grid-column: 2; /* 占据第二列 */
  grid-row: 1 / span 2; /* 跨越两行，从第一行开始 */
}
 
.item3 {
  grid-column: 1; /* 占据第一列 */
  grid-row: 2; /* 占据第二行 */
}
 
.item4 {
  grid-column: 2; /* 占据第二列 */
  grid-row: 2; /* 占据第二行 */
}
 
.item5 {
  grid-column: 1 / span 2; /* 跨越两列，从第一列开始 */
  grid-row: 3; /* 尝试占据第三行，但由于没有定义，不会显示 */
}

在这个例子中，.container 使用了 display: grid 来创建一个网格布局，并通过 grid-template-columns 和 grid-template-rows 定义了网格的结构。.item1 到 .item5 通过 grid-column 和 grid-row 属性来指定它们在网格中的位置。

CSS Grid 提供了许多其他的属性来控制网格的行为，比如 grid-template-areas 用于创建复杂的布局，justify-items, align-items, justify-content, 和 align-content 用于控制网格内容的对齐和分布。