使用纯CSS构建砌体画廊布局

建立一个像Pinterest这样的CSS网格

今天，我将向您展示如何使用CSS Grid构建复杂的砖石网格。CSS Grid改变了我们设计布局的方式，并且我们将使用其功能来构建一个有趣的项目。

如果您对CSS Grid感到生锈，或者需要重新刷牙，建议您通读本文。无论如何，我都会解释为构建项目而介绍的所有代码。

好的。让我们开始。

---

我们将建立什么

这就是本文结尾处的布局。

看起来有趣吗？如果是这样，请继续。

这就是CSS Grid的真正亮点，因为它允许您根据自己的喜好放置和对齐网格项目，并且它可以变得任意复杂。

---

开始构建网格之前要注意的事情

1. 计算cell您要在网格中拥有的最小网格，即您要在网格中拥有的最小图像。
2. 一个单元格由它跨越的行数（高度）和列数（宽度）确定。
3. 最小的像元大小将决定网格的复杂程度。
4. 计算columns并rows根据最小像元数

---

让我们开始建设

首先创建一个准系统HTML文件，该文件最终将容纳我们的砌体网格。您可以从GitHub分支基础项目。

现在让我们看一下基本声明。

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  box-sizing: border-box;
  font-size: 62.5%;
}

.masonry {
  background-color: white;
  width: 100vw;
  height: 100vh;
  padding: 1rem;

  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(14, 1fr);

  row-gap: 1rem;
  column-gap: 1rem;
}

style.css

index.html

For readability purposes, we will only look at code inside the body tag

第一个代码段包含基本的CSS重置，并且定义了.masonry选择器以显示为grid。第二个代码段包含一个section，它将充当网格，并最终包含所有网格项。

让我们在这里进行一些观察。

1. 我们设置网格height和width要100vh和100vw分别所以我们的网格占用所有可用的屏幕尺寸。您可以根据需要自定义它。
2. 网格列/行声明：
   grid-template-columns: repeat(16, 1fr)—定义网格将包含多少列。重复功能使我们可以创建多个具有相同大小的列（本例中为16列）。1fr表示16列中的每一列都会有1 fraction (fr)个可用宽度。
   这同样适用于该grid-row-columns: repeat(14, 1fr)声明。
   因此，现在我们有了一个16列14行的网格。您可以根据需要进行更改。
3. 在我们的HTML文件中，我们只有一个网格单元，即figure元素。我们已经img将figure标签嵌套在标签下。以后再说。

这就是我们的网格现在的外观。由于图像很大，因此图像与网格容器重叠。

这就是为什么我们将图像包装在图形标签中的原因。图像的网格纵横比不符合网格单元，因此无法很好地工作。该figure标签现在将作为网格单元，我们可以设置图像在其内部调整。

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

将以上样式添加到img调整图像以符合单元格的边界。

---

最后，让我们布置网格单元

定义网格的列和行使我们可以访问网格（列和行）轨迹，现在可以使用该轨迹跨我们想要的单元格了。

您可以使用CSS Grid inspector更好地可视化它。您可以使用此Mozilla文档将其打开。

如您所见，网格列的轨迹范围从1到17，总共有16列。同样，网格行轨迹的范围是1到15，共有14行。

让我们布置第一个网格单元。

现在，我们希望单元格跨越五列宽和五列高。我们可以使用CSS网格的grid-row和grid-column属性来定义它。

.cell--1 {   
  grid-column: 1 / 6;   
  grid-row: 1 / 6; 
}

让我们先看一下grid-column属性。我们为其提供两个值。

第一个属性定义我们希望单元格从其开始跨越的列轨迹，第二个值定义结束。这同样适用于该grid-row财产。

现在该单元格跨越五列宽和五列高。有很多不同的方式来提供值grid-column，并grid-row和你可以看到他们的CSS技巧。

同样，我们可以布置其余单元格。作为挑战，您可以在标记中添加更多网格单元，然后尝试布局它们。

为简洁起见，我包括了为构建起初展示的砌体画廊而编写的代码。

index.html

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  box-sizing: border-box;
  font-size: 62.5%;
}

.masonry {
  background-color: white;
  width: 100vw;
  height: 100vh;
  padding: 1rem;

  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(14, 1fr);

  row-gap: 1rem;
  column-gap: 1rem;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}


.cell--1 {
  grid-column: 1 / 6;
  grid-row: 1 / 6;
}


.cell--2 {
  grid-column: 6 / 9;
  grid-row: 1 / 11;
}

.cell--3 {
  grid-column: 9 / 12;
  grid-row: 1 / 4;
}

.cell--4 {
  grid-column: 12 / -1;
  grid-row: 1 / 4;
}

.cell--5 {
  grid-column: 1 / 4;
  grid-row: 6 / 11;
}

.cell--6 {
  grid-column: 4 / 6;
  grid-row: 6 / 7;
}

.cell--7 {
  grid-column: 4 / 6;
  grid-row: 7 / 11;
}

.cell--8 {
  grid-column: 1 / 6;
  grid-row: 11 / -1;
}

.cell--9 {
  grid-column: 6 / 12;
  grid-row: 11 / -1;
}

.cell--10 {
  grid-column: 9 / 12;
  grid-row: 4 / 11;
}

.cell--11 {
  grid-column: 12 / 13;
  grid-row: 4 / 6;
}

.cell--12 {
  grid-column: 13 / -1;
  grid-row: 4 / 6;
}

.cell--13 {
  grid-column: 12 / -1;
  grid-row: 6 / 13;
}

.cell--14 {
  grid-column: 12 / -1;
  grid-row: 13 / -1;
}

style.css

这就是现在的布局。利用当前的知识，您可以构建更复杂的网格。这只是说明CSS网格基础知识的一个示例。

您可以在GitHub上找到该项目的仓库。如有任何疑问，请随时与我联系。

就是这样，伙计们。

翻译自：https://medium.com/better-programming/learn-to-build-a-masonry-gallery-layout-using-pure-css-50331dbc1e15