建立一个像Pinterest这样的CSS网格
今天，我将向您展示如何使用CSS Grid构建复杂的砖石网格。CSS Grid改变了我们设计布局的方式，并且我们将使用其功能来构建一个有趣的项目。
如果您对CSS Grid感到生锈，或者需要重新刷牙，建议您通读本文。无论如何，我都会解释为构建项目而介绍的所有代码。
好的。让我们开始。
我们将建立什么
这就是本文结尾处的布局。
看起来有趣吗？如果是这样，请继续。
这就是CSS Grid的真正亮点，因为它允许您根据自己的喜好放置和对齐网格项目，并且它可以变得任意复杂。
开始构建网格之前要注意的事情
- 计算
cell您要在网格中拥有的最小网格，即您要在网格中拥有的最小图像。 - 一个单元格由它跨越的行数（高度）和列数（宽度）确定。
- 最小的像元大小将决定网格的复杂程度。
- 计算
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;
}
<section class="masonry">
<figure class="cell cell--1">
<img
src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt="Food picture 1">
</figure>
</section>
For readability purposes, we will only look at code inside the body tag
第一个代码段包含基本的CSS重置，并且定义了.masonry选择器以显示为grid。第二个代码段包含一个section，它将充当网格，并最终包含所有网格项。
让我们在这里进行一些观察。
- 我们设置网格
height和width要100vh和100vw分别所以我们的网格占用所有可用的屏幕尺寸。您可以根据需要自定义它。 - 网格列/行声明：
grid-template-columns: repeat(16, 1fr)—定义网格将包含多少列。重复功能使我们可以创建多个具有相同大小的列（本例中为16列）。1fr表示16列中的每一列都会有1fraction (fr)个可用宽度。
这同样适用于该grid-row-columns: repeat(14, 1fr)声明。
因此，现在我们有了一个16列14行的网格。您可以根据需要进行更改。 - 在我们的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技巧。
同样，我们可以布置其余单元格。作为挑战，您可以在标记中添加更多网格单元，然后尝试布局它们。
为简洁起见，我包括了为构建起初展示的砌体画廊而编写的代码。
<section class="masonry">
<figure class="cell cell--1">
<img
src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--2">
<img
src="https://images.unsplash.com/photo-1495147466023-ac5c588e2e94?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--3">
<img
src="https://images.unsplash.com/photo-1485963631004-f2f00b1d6606?ixlib=rb-1.2.1&auto=format&fit=crop&w=968&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--4">
<img
src="https://images.unsplash.com/photo-1514852451047-f8e1d1cd9b64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1112&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--5">
<img
src="https://images.unsplash.com/photo-1514997618358-2c490d913b78?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--6">
<img
src="https://images.unsplash.com/photo-1514056052883-d017fddd0426?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=648&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--7">
<img
src="https://images.unsplash.com/photo-1503011994592-d30eb1ef61dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=995&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--8">
<img
src="https://images.unsplash.com/photo-1487790343276-2fe56a7d9439?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1047&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--9">
<img
src="https://images.unsplash.com/photo-1483918793747-5adbf82956c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--10">
<img
src="https://images.unsplash.com/photo-1483918793747-5adbf82956c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--11">
<img
src="https://images.unsplash.com/photo-1485962398705-ef6a13c41e8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--12">
<img
src="https://images.unsplash.com/photo-1504123311630-7a21d62be4a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--13">
<img
src="https://images.unsplash.com/photo-1504123311630-7a21d62be4a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
alt="Food picture 1">
</figure>
<figure class="cell cell--14">
<img
src="https://images.unsplash.com/photo-1559912553-fc5637d88768?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=735&q=80"
alt="Food picture 1">
</figure>
</section>
* {
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;
}
这就是现在的布局。利用当前的知识，您可以构建更复杂的网格。这只是说明CSS网格基础知识的一个示例。
您可以在GitHub上找到该项目的仓库。如有任何疑问，请随时与我联系。
就是这样，伙计们。
