【前端｜CSS系列第4篇】CSS布局之网格布局

CSS网格布局是CSS中强大的功能，它可以帮助我们创建复杂的布局，而不需要使用多个嵌套的HTML元素。

以下是一个简单的网格布局示例：

HTML:

<div class="grid-container">
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
  <div class="grid-item4">4</div>
  <div class="grid-item5">5</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
}
 
.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 2;
}
 
.grid-item2 {
  grid-row-start: 1;
  grid-row-end: 3;
}
 
.grid-item3 {
  grid-column-start: 3;
  grid-column-end: 4;
}
 
.grid-item4 {
  grid-row-start: 2;
  grid-row-end: 3;
}
 
.grid-item5 {
  grid-column-start: 2;
  grid-column-end: 3;
}
 
.grid-container > div {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

在这个示例中，我们创建了一个具有不同大小和位置的网格布局。.grid-container 类使用 display: grid 属性启用网格布局，并定义了三列和一个行间隔。每个 .grid-item 子元素根据其类名被赋予了特定的网格位置。