CSS中的网格布局你学会了吗

terry 2年前 (2023-09-28) 阅读数 351 #数据结构与算法

很多前端经理都熟悉Flex布局，但对网格布局并不熟悉，甚至从未在项目中使用过。今天我将向您展示如何使用网格布局。

1。什么是网格布局

网格是由一系列水平线和垂直线组成的布局模式。根据网格我们可以排列设计元素，这使得我们可以设计一系列位置和宽度固定的页面元素，使我们的网站页面更加统一。

一个网格通常有许多列和，以及行与行、列与列之间的间隙。该开口通常称为 凹槽。（排水沟）。

就是下图：

我们通常根据设计图来确定网格布局的样子。

接下来，我们将从基本的网格系统开始。？

.container {
  display: grid;
}

2.2。 grid-template-columns

此时布局没有改变。我们需要通过 grid-template-columns 设置列的宽度。让我们给出三列，每列是 200px。。

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

目前页面效果如下：

2.3。 space

使用 grid-column-gap(en-US) 属性定义列间隙；使用 grid-row-gap(en-US) 定义行间距；使用 grid-gap(en-US) 来设置两者。

修改代码：

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-gap: 20px;
  gap: 20px;
}

注释： 间隙属性曾经有网格前缀，但后来修改了默认值以适用于不同的布局方法。虽然现在这个前缀不影响语义，但是为了代码的健壮性，你可以写这两个属性。

目前页面效果如下：

2.4。 fr

这里除了使用px之外，我们还可以使用fr单位来灵活定义网格的行和列的大小。该单位表示网格容器中可用空间的一部分。也就是说，将列分成相等的部分后，每列所占的份额是多少？ fr值越高，占用的空间越大。

更改代码：

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

这意味着该列将被分成三等份，每列占用1个空间。

目前页面效果如下：

2.5。重复

您可以使用重复来重复构建具有特定宽度配置的某些列。例如，如果要创建多个等宽的轨道，可以使用以下方法。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

这个效果对应上面的代码。传入repeat函数的第一个值（3）指定重复后续列宽配置的次数，而第二个值（1fr）指定需要重复构建配置，可以有多个长度设置。例如，重复 (2, 2fr 1fr)。如果还是不明白，可以实际测试一下效果，相当于填写2fr 1fr 2fr 1fr。

2.6。 grid-template-rows

您可以通过grid-template-rows设置行高。我们为每行设置 100px。

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
}

目前页面效果如下：

2.7。 minmax() 函数

高度为 100 像素的轨道有时可能不够，因为经常添加超过 100 像素的内容。所以我们可以将其设置为至少100像素，并随着内容自动扩大尺寸，以确保它可以容纳所有内容。显然，很难知道网页上的元素在不同情况下的大小是多少。一些额外的内容或较大的字体大小会在许多可以实现像素级精度的设计中引起问题。于是就有了minmax()函数。

minmax() 函数设置行/列大小的值范围。例如，如果设置为 minmax(100px, auto)，则大小将至少为 100 像素，如果内容大小大于 100 像素，则会自动缩放到内容。在这里，尝试将 grid-auto-rows 属性设置为 minmax 函数。

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(100px, auto) 100px 100px;
}

现在页面效果如下：

可以看到，我们设置minmax（100px，auto）后，内容高度会自动增加。

2.8。 auto-fill

上面的布局中，行列属性每次都要写入3次才能生效。有更容易的方法吗？是的，这是一个重复的参数：自动完成。

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
}

目前页面效果如下：

上述代码参考地址：https://stackblitz.com/edit/web-platform-vabj4w?file=styles.css

3.基于线的元素放置

因为它是一个网格，所以它包含线，我们可以根据这些线的位置来放置元素。如下图所示：

在英语中，第一列分隔线（即网格边缘线）位于网格的最左侧，第一行分隔线位于网格的顶部。对于阿拉伯语，第一个列分隔符位于网格的最右侧，因为阿拉伯语是从右向左书写的。

3.1。 grid-column 和 grid-row

我们根据这些分割线放置元素，并通过以下属性指定从哪一行开始和到哪一行结束。

grid-column-start
grid-column-end
grid-row-start
grid-row-end

这些属性的值是分隔符的序号。您还可以使用以下简短形式来指定起始行和结束行。

grid-column
grid-row

注意：起始行和结束行的序号必须用符号/分隔。

不明白上面的概念？没关系，接下来我们来做一个博客系统的布局，你就明白了：

页面布局如下：

<div class="container">
  <header>This is my lovely blog</header>
  <aside>
    <h2>Other things</h2>
    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget
      malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut,
      facilisis sed est.
    </p>
  </aside>
  <article>
    <h1>My article</h1>
    <p>
      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras
      porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed
      auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
      orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac
      ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
      volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin
      eros pharetra congue. Duis ornare egestas augue ut luctus. Proin
      blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
      eget fermentum sapien.
    </p>

    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget
      malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut,
      facilisis sed est. Nam id risus quis ante semper consectetur eget
      aliquam lorem. Vivamus tristique elit dolor, sed pretium metus
      suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu
      urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt
      eget purus in interdum. Cum sociis natoque penatibus et magnis dis
      parturient montes, nascetur ridiculus mus.
    </p>
  </article>

  <footer>Contact me@mysite.com</footer>
</div>

添加Css样式

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

aside {
  border-right: 1px solid #999;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}

我们看看这个页面布局的网格线：

取标题。例如，Grid Column: 1/3 表示列位置从分隔符编号 1 开始，到分隔符编号 3 结束。这与上图中的网格线匹配吗？？其他元素的布局也类似，大家可以一一比较。

上述代码参考地址：https://stackblitz.com/edit/web-platform-tmtmba?file=styles.css

3.2。 grid-template-areas

当然可以做上面的布局实现。还有另一种将元素放置在网格中的方法：网格模板区域，您可以命名一些元素并在区域的属性中使用这些名称。

删除之前基于规则的元素放置代码（或者重新下载新文件），然后添加以下CSS规则：

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

也可以实现与上面博客相同的布局效果。

4。光栅化框架

光栅化框架通常由12到16列的网格组成。下面我们实现一个12列的网格排版框架。页面布局仍然以上面的博客为例。参考代码：https://stackblitz.com/edit/web-platform-pfi7ju?file=styles.css

我们可以使用基于笔划的元素放置模式来放置我们的内容。内容放置在这个 12 列的网格中。

.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); /** 关键代码 **/
  gap: 20px;
}

header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}

使用 Google Chrome 中的开发者工具查看网格线，您应该能够看到 12 列网格的工作原理。