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

作者: 开心人开发世界 | 来源:发表于2019-12-05 10:50 被阅读0次

建立一个像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;
}

style.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>
</section>

index.html

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列中的每一列都会有1 fraction (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>

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

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

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

我们将建立什么

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

让我们开始建设

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

视觉艺术