试着让我的网格并排而不是堆叠在一起

Question

我试图建立一个两列三行的网格。现在我只有一个大专栏，我不能让他们并肩作战。

​

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "fox llama" "wolf pangolin" "marmoset panda";
}

.fox {
  grid-area: fox;
}

.llama {
  grid-area: llama;
}

.wolf {
  grid-area: wolf;
}

.marmoset {
  grid-area: marmoset;
}

.panda {
  grid-area: panda;
}

.pangolin {
  grid-area: pangolin;
}

<div class="container">
  <div class="main-background">
    <div class="fox">
      <h2 class="fox">FENNEC FOX</h2>
      <img src="./assets/images/fennec-fox.jpg" alt="FENNEC FOX">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>

    <div class="llama">
      <h2 class="llama">LLAMA</h2>
      <img src="./assets/images/llama.jpg" alt="LLAMA">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>
    
    <div class="wolf">
      <h2 class="wolf">MANED WOLF</h2>
      <img src="./assets/images/maned-wolf.jpg" alt="MANED WOLF">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>

    <div class="pangolin">
      <h2 class="pangolin">PANGOLIN</h2>
      <img src="./assets/images/pangolin.jpg" alt="PANGOLIN">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>

    <div class="marmoset">
      <h2 class="marmoset">PYGMY MARMOSET</h2>
      <img src="./assets/images/pygmy-marmoset.jpg" alt="PYGMY MARMOSET">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>

    <div class="panda">
      <h2 class="panda">RED PANDA</h2>
      <img src="./assets/images/red-panda.jpg" alt="RED PANDA">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>
    
  </div>
</div>

​

这就是我想要完成的代码，当它是正确的样子。

https://imgur.com/a/fL41gcV

只是增加了更多的文字，因为它说我必须，即使我不知道还能添加什么。

Answer 1

在您的.main-background中有一个包含所有其他元素的.container。因此，.container网格不影响元素，而只影响.main-background。要么将.main-background从.container中移出，要么使用.main-background作为网格。您还可以关闭.main-backgound中的.container并将其定位为绝对。

如果不知道网格将有多少行，则可以使用grid-auto-rows: 1fr;。

​

.main-background {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-template-areas:
    "fox llama"
    "wolf pangolin"
    "marmoset panda";
}

.fox {
  grid-area: fox;
}

.llama {
  grid-area: llama;
}

.wolf {
  grid-area: wolf;
}

.marmoset {
  grid-area: marmoset;
}

.panda {
  grid-area: panda;
}

.pangolin {
  grid-area: pangolin;
}

<div class="container">
  <div class="main-background">
    <div class="fox">
      <h2 class="fox">FENNEC FOX</h2>

      <img src="./assets/images/fennec-fox.jpg" alt="FENNEC FOX" />

      <p></p>

      <p class="TLM">
        TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a>
      </p>
    </div>

    <div class="llama">
      <h2 class="llama">LLAMA</h2>

      <img src="./assets/images/llama.jpg" alt="LLAMA" />

      <p></p>

      <p class="TLM">
        TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a>
      </p>
    </div>

    <div class="wolf">
      <h2 class="wolf">MANED WOLF</h2>

      <img src="./assets/images/maned-wolf.jpg" alt="MANED WOLF" />

      <p></p>

      <p class="TLM">
        TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a>
      </p>
    </div>

    <div class="pangolin">
      <h2 class="pangolin">PANGOLIN</h2>

      <img src="./assets/images/pangolin.jpg" alt="PANGOLIN" />

      <p></p>

      <p class="TLM">
        TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a>
      </p>
    </div>

    <div class="marmoset">
      <h2 class="marmoset">PYGMY MARMOSET</h2>

      <img src="./assets/images/pygmy-marmoset.jpg" alt="PYGMY MARMOSET" />

      <p></p>

      <p class="TLM">
        TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a>
      </p>
    </div>

    <div class="panda">
      <h2 class="panda">RED PANDA</h2>

      <img src="./assets/images/red-panda.jpg" alt="RED PANDA" />

      <p></p>

      <p class="TLM">
        TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a>
      </p>
    </div>
  </div>
</div>

​

Answer 2

您的问题是，.container中还有另一个容器，即.main-background。你的卡在那个容器里，而不是.container。只需将你的造型应用于此。

此外，您的CSS中有很多不必要的代码，我会将其简化为：

​

.main-background {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

<div class="container">
  <div class="main-background">
    <div class="fox">
      <h2 class="fox">FENNEC FOX</h2>
      <img src="./assets/images/fennec-fox.jpg" alt="FENNEC FOX">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>

    <div class="llama">
      <h2 class="llama">LLAMA</h2>
      <img src="./assets/images/llama.jpg" alt="LLAMA">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>

    <div class="wolf">
      <h2 class="wolf">MANED WOLF</h2>
      <img src="./assets/images/maned-wolf.jpg" alt="MANED WOLF">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>

    <div class="pangolin">
      <h2 class="pangolin">PANGOLIN</h2>
      <img src="./assets/images/pangolin.jpg" alt="PANGOLIN">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>

    <div class="marmoset">
      <h2 class="marmoset">PYGMY MARMOSET</h2>
      <img src="./assets/images/pygmy-marmoset.jpg" alt="PYGMY MARMOSET">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>

    <div class="panda">
      <h2 class="panda">RED PANDA</h2>
      <img src="./assets/images/red-panda.jpg" alt="RED PANDA">
      <p></p>
      <p class="TLM">TO LEARN MORE <a href="#" target="_blank" class="CH">CLICK HERE</a></p>
    </div>

  </div>
</div>

​