html - 像斐波那契这样的 CSS 网格

Question

这是期望的结果（类似于斐波那契的网格）：

我知道使用 css 网格可以做到这一点，但由于我并不像我想的那样熟悉，所以我尝试使用这个https://cssgrid-generator.netlify.com/，如下所示：

.parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    .div1 {
        grid-area: 1 / 1 / 2 / 3;
    }
    .div2 {
        grid-area: 2 / 1 / 4 / 2;
    }
    .div3 {
        grid-area: 2 / 2 / 3 / 3;
    }
    .div4 {
        grid-area: 3 / 2 / 4 / 3;
    }
}

我必须使其适应我的标记，它看起来像这样（运行代码片段）

.post__gallery--4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-column-gap: 40px;
  grid-row-gap: 26px;
}

.post__gallery--4 .post__image:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;
}

.post__gallery--4 .post__image:nth-child(2) {
  grid-area: 2 / 1 / 4 / 2;
}

.post__gallery--4 .post__image:nth-child(3) {
  grid-area: 2 / 2 / 3 / 3;
}

.post__gallery--4 .post__image:nth-child(4) {
  grid-area: 3 / 2 / 4 / 3;
}

<div class="post__gallery post__gallery--4">
  <img src="http://lorempixel.com/1145/763/abstract/" class="post__image">
  <img src="http://lorempixel.com/552/830/abstract/" class="post__image">
  <img src="http://lorempixel.com/552/402/abstract/" class="post__image">
  <img src="http://lorempixel.com/552/401/abstract/" class="post__image">
</div>

但由于某种原因，最后一张图片在网格之外，它会推送下面的内容。

知道如何解决这个问题吗？

标签： htmlcssgridcss-gridfibonacci

Answer 1

一种方法是使用网格区域，但如果您想要重复模式，那么您应该创建具有相同区域布局的多个元素。

.area {
  display: grid;
  grid-template-areas: 
            "one one"
            "two three"
            "two four";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  width: 100%;
  margin-bottom: 15px;
}

.area > img {
  max-width: 100%;
}

img:nth-child(1) {
   grid-area: one;
}

img:nth-child(2) {
  grid-area: two;
}

img:nth-child(3) {
  grid-area: three;
}

img:nth-child(4) {
  grid-area: four;
}

<div class="gallery">
  <div class="area">
    <img src="https://via.placeholder.com/1145x763" class="post__image">
    <img src="https://via.placeholder.com/552x830" class="post__image">
    <img src="https://via.placeholder.com/552x402" class="post__image">
    <img src="https://via.placeholder.com/552x401" class="post__image">
  </div>
  
  <div class="area">
    <img src="https://via.placeholder.com/1145x763" class="post__image">
    <img src="https://via.placeholder.com/552x830" class="post__image">
    <img src="https://via.placeholder.com/552x402" class="post__image">
    <img src="https://via.placeholder.com/552x401" class="post__image">
  </div>
</div>

使用一个包装器元素的另一种方法是使用网格自动列和行。要为 4 个元素中的每一个选择第 n 个元素，例如每秒 4 个元素，您可以使用:nth-child(4n + 2)

.gallery {
  display: grid;
  grid-auto-columns: repeat(2, 1fr);
  grid-auto-rows: repeat(3, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  width: 100%;
  margin-bottom: 15px;
}

.gallery>img {
  max-width: 100%;
}

img:nth-child(4n + 1) {
  grid-column: span 2;
}

img:nth-child(4n + 2) {
  grid-row: span 2;
  grid-column: span 1;
}

img:nth-child(4n + 3),
img:nth-child(4n + 4) {
  grid-row: span 1;
  grid-column: span 1;
}

<div class="gallery">
  <img src="https://via.placeholder.com/1145x763" class="post__image">
  <img src="https://via.placeholder.com/552x830" class="post__image">
  <img src="https://via.placeholder.com/552x402" class="post__image">
  <img src="https://via.placeholder.com/552x401" class="post__image">
  <img src="https://via.placeholder.com/1145x763" class="post__image">
  <img src="https://via.placeholder.com/552x830" class="post__image">
  <img src="https://via.placeholder.com/552x402" class="post__image">
  <img src="https://via.placeholder.com/552x401" class="post__image">
</div>