Published 2022-05-09

css - Grid

Grid 是 CSS 中用于创建网格布局的一种新的布局方式,可以轻松地创建复杂的网格布局。它具有以下特点:

以下是一个简单的 Grid 布局案例,它实现了一个基本的网格布局:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
  <div class="item6">Item 6</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}
 
.grid-container > div {
  background-color: #ddd;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
 
.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
 
.item2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
}
 
.item3 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
}
 
.item4 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
}
 
.item5 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
}
 
.item6 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 3;
}

在这个案例中,我们首先定义了一个网格容器 .grid-container,并设置了它的列数为 3,行数为 2,每个网格轨道的高度为 100px,网格项之间的间距为 10px。接着,我们定义了六个网格项,并通过设置它们在网格容器中所处的位置,来实现了一个三列、三行的网格布局。

其中,.item1 占据了网格容器的第一行和第二行的前两列,.item2 占据了网格容器的第一行的第三列,.item3 占据了网格容器的第二行的第三列,.item4 占据了网格容器的第三行的第一列,.item5 占据了网格容器的第三行的第二列,.item6 占据了网格容器的第三行的第三列。

0n30LE