CSS 网格初学者指南

CSS 定位一直是许多开发者难以攻克的难题。它至少可以说是繁琐、棘手且令人沮丧的。我什么时候应该使用position:absolute或position:relative？为什么我的元素不能堆叠在一起？

前端开发人员务必了解所有这些不同属性的用途以及如何使用它们。不过，还有另一种方法可以精确地按照您的需要定位元素：

CSS网格

CSS 网格于 2007 年 4 月问世，解决了当时 Flexbox 布局带来的定位难题。Flexbox布局在处理单维度（行或列）时表现良好，而网格通常更适合处理二维布局。以下是一张信息图，希望能帮到你：

这是为了显示页面上的主轴。使用弹性盒设计时，你需要在开始之前知道元素将沿着哪个轴移动，因为它只能在一个维度上工作。

那么让我们了解一些实际的 CSS 网格。

这是我用于示例的基本代码，以防您想亲自测试一下：

/* CSS */

.base-box {
  font-size: 1.5rem;
  width: auto;
  height: 125px;
  margin: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

#container {
  background-color: rgb(241, 194, 194);
}
#box-1 {
  background-color: rgb(75, 79, 105);
}

#box-2 {
  background-color: rgb(197, 40, 119);
}

#box-3 {
  background-color: rgb(54, 202, 228);
}

#box-4 {
  background-color: rgb(36, 233, 52);
}

#box-5 {
  background-color: rgb(238, 179, 90);
}

<!-- HTML -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id='container'>
      <div id='box-1' class='base-box'>Div 1</div>
      <div id='box-2' class='base-box'>Div 2</div>
      <div id='box-3' class='base-box'>Div 3</div>
      <div id='box-4' class='base-box'>Div 4</div>
      <div id='box-5' class='base-box'>Div 5</div>
    </div>
</body>
</html>

在浏览器中打开 index.html 后，您应该看到如下页面：

现在让我们将容器元素的 display 改为display: grid;。一开始，除了一点点额外的间距之外，你不会看到太多变化。真正的魔力在于创建模板的时候。试着把这段代码放入容器元素中，然后打开浏览器的开发者工具来查看：

grid-template-columns: repeat(5, 250px);
grid-template-rows: 150px;

注意：repeat() 允许我们一次创建同一网格单元的多个副本。

如果你使用浏览器的开发者工具将鼠标悬停在容器元素上，你应该会看到每个盒子之间有一些虚线。这些就是网格线。这些就是我们上面用 grid-template-columns 代码创建的，现在每个盒子都有自己的单元格了。

分数单位

不过，我们可以改进这一点。就目前的情况来看，网格末端会有一些额外的空间，而且对不同的屏幕尺寸响应不太灵敏。不过我们可以解决这个问题！网格有一个特定的测量单位，叫做fr。它代表“分数单位”，这是一种很棒的方法，既能为子元素分配空间，又能兼顾屏幕尺寸和屏幕断点。

我们将列宽从 250px 改为

grid-template-columns: repeat(5, 1fr)

在这里，我们看到所有网格容器都占据了容器的相同比例。我们可以混合搭配这些尺寸来获得我们想要的布局。尝试：

/* grid-template-columns: repeat(5, 1fr) */
grid-template-columns: 2fr 1fr 3fr;
grid-template-rows: 1fr 1fr;

网格速记

好的，还有一件事要注意，那就是网格的简写。这让我们可以根据起点/终点语法来决定子元素在网格上占用的空间。

我们之前记得，网格有网格线来分隔行和列。从容器的最开始，网格线从左到右编号，列从 1 开始，行从上到下编号。在网格简写中，我们使用这些行号来指示容器在网格上的起始和终止时间。

图片来源

我们的橙色盒子似乎在容器的末尾有很多剩余空间。让我们用 grid-shorthand 来解决这个问题。我们希望这个盒子从第二条网格线开始，并占据剩余的空间。

#box-5 {
  background-color: rgb(238, 179, 90);
  grid-column: 2/4;
}

CSS 网格布局是一种以响应式、富有创意且简洁的方式充分利用页面空间的绝佳方法。以下是一些深入了解 CSS 网格布局的资源。

文章来源：https://dev.to/aidanmargo/a-beginners-guide-to-css-grid-3f32