Web前端-Web开发CSS基础7-网格

CSS网格（Grid）是CSS的一个强大功能，它使得创建复杂的布局变得更加简单。网格可以使得开发者能够更容易地创建列和行的布局，并且可以灵活地操控其中的项目。

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

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; /* 定义两列，第一列自动宽度，第二列占据剩余空间 */
  gap: 10px; /* 设置网格之间的间隙 */
}
 
.item1 {
  grid-column: 1; /* 将item1放置在第一列 */
  grid-row: 1; /* 将item1放置在第一行 */
}
 
.item2 {
  grid-column: 2; /* 将item2放置在第二列 */
  grid-row: 1; /* 将item2放置在第一行 */
}
 
.item3 {
  grid-column: 1; /* 将item3放置在第一列 */
  grid-row: 2; /* 将item3放置在第二行 */
}
 
.item4 {
  grid-column: 2; /* 将item4放置在第二列 */
  grid-row: 2; /* 将item4放置在第二行 */
}
 
.item5 {
  grid-column: 1 / 3; /* 将item5跨越两列 */
  grid-row: 3; /* 将item5放置在第三行 */
}

这个例子中，.container 类使用了 display: grid 属性来指定这个div是一个网格容器。grid-template-columns 属性定义了网格的列数和每列的宽度。gap 属性设置了网格之间的间隙。

.item1 至 .item5 分别使用了 grid-column 和 grid-row 属性来指定它们在网格中的位置。.item5 使用了 grid-column: 1 / 3 来表示它跨越了从第一列到第二列。

CSS网格是一种强大的工具，可以用来创建各种复杂的布局。它提供了多种属性来控制网格的行和列，包括大小、位置、间隙和对齐等。