我想做一个两列三行的网格.现在我只有一个大专栏,我不能让他们并排走.
.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>
这就是我希望完成的代码正确时的样子.
只是添加更多的文本,因为它说我必须这样做,尽管我不知道还能添加什么.