CSS Grid - 理解它的基本原理

2023-11-25 15:59:26

CSS Grid 是一种新的布局系统，可让您在任何屏幕尺寸下创建一致且响应迅速的布局。它于2017年成为CSS的一部分，并已迅速成为创建网页布局的首选方式。

CSS Grid 的基本原理

CSS Grid由两个核心组成部分是 wrapper（父元素）和 items（子元素）。wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。下面是一个 wrapper 元素，内部包含6个 items ：

<div class="wrapper">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

为了使其成为二维的网格容器，我需要为 wrapper 元素设置 display: grid; 属性。这将告诉浏览器创建一个网格容器，并将子元素排列在网格中。

.wrapper {
  display: grid;
}

现在，我可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。例如，以下代码将创建两列和三行的网格：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

使用 CSS Grid 创建布局

使用 CSS Grid 创建布局非常简单。首先，需要创建一个 wrapper 元素并将其设置为 display: grid;。然后，可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。最后，可以使用 grid-area 属性将子元素放置在网格中。

例如，以下代码将创建如下所示的布局：

<div class="wrapper">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px;
}

.item1 {
  grid-area: 1 / 1 / 2 / 2;
}

.item2 {
  grid-area: 1 / 2 / 2 / 3;
}

.item3 {
  grid-area: 2 / 1 / 3 / 2;
}

.item4 {
  grid-area: 2 / 2 / 3 / 3;
}

.item5 {
  grid-area: 3 / 1 / 4 / 2;
}

.item6 {
  grid-area: 3 / 2 / 4 / 3;
}