我想做一个两列三行的网格.现在我只有一个大专栏,我不能让他们并排走.

.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

只是添加更多的文本,因为它说我必须这样做,尽管我不知道还能添加什么.

推荐答案

你的.container里面有一个.main-background,里面有所有其他元素.所以.container格线不影响元素,只影响.main-background格线.将.main-background移出.container或将.main-background用作网格.你也可以在.container中关闭.main-backgound,并将其定位为绝对位置.

如果不知道网格将有多少行,可以使用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>

Html相关问答推荐

需要关于HTML的建议

通过动态div的对角线

如何在用css使用网格视图时设置宽度?

如何创建带有粘性列和标题的网格?

Bootstrap nav没有崩溃

水平卷轴的内容保持堆叠

类型';联系人组件';上不存在属性';name FormControl';

使用bash从html表格中提取表格

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单?

如何将 元素与常规文本垂直对齐

如何在悬停时使矩形按钮上的边框变圆

在DIV上应用梯度模糊未如预期工作

为什么图像会影响我的

项目的水平列表:倒数第二个项目居中,而最后一个项目占据所有剩余空间

使用模板循环每行列出 3 个 bootstrap 卡

CSS Padding 将右对齐的对象推离页面

Bootstrap Grid System col 无法正常工作

我可以将两个元素之间的所有空间都放在弹性框或网格中吗?

如何使用 html 和 css 添加超链接功能

停止 CSS 滑入动画的组件在开始时可见