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>

但由于某些原因，最后一张图片在网格之外，并将内容推到下方。

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

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>

使用一个包装器元素的另一种方法是使用 grid-auto 列和行。要 select 每个 nth-element 对于 4 个元素中的每一个，例如每秒在 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>

CSS 像斐波那契一样的网格

CSS grid like fibonacci

html

css

grid

fibonacci

css-grid