Trying to get my grid go side by side instead of being stacked on top of each other-CodePudding

I'm trying to make a grid that is two columns and three rows. Right now i just have 1 big column i cant get them to go side by side.

.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 >
  <div >
    <div >
      <h2 >FENNEC FOX</h2>
      <img src="./assets/images/fennec-fox.jpg" alt="FENNEC FOX">
      <p></p>
      <p >TO LEARN MORE <a href="#" target="_blank" >CLICK HERE</a></p>
    </div>

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

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

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

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

This is what i want the finished code to look like when it is correct.

https://imgur.com/a/fL41gcV

Just adding more text because it says i have to even though i dont know what else to add.

CodePudding user response：

You have a .main-background inside of your .container with all the other elements in it. So the .container grid does not affect the elements but only the .main-background. Either move the .main-background out of the .container or use the .main-background as the grid. You could also close the .main-backgound inside the .container and position it absolute.

If you don't know how many rows your grid will have, you can use 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 >
  <div >
    <div >
      <h2 >FENNEC FOX</h2>

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

      <p></p>

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

    <div >
      <h2 >LLAMA</h2>

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

      <p></p>

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

    <div >
      <h2 >MANED WOLF</h2>

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

      <p></p>

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

    <div >
      <h2 >PANGOLIN</h2>

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

      <p></p>

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

    <div >
      <h2 >PYGMY MARMOSET</h2>

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

      <p></p>

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

    <div >
      <h2 >RED PANDA</h2>

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

      <p></p>

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

CodePudding user response：

Your problem is that there is another container inside .container, which is .main-background. Your cards are inside that container, not .container. Just apply your styling to that instead.

Also, there is a lot of unnecessary code in your CSS, I would simplify it to just this:

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

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

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

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

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

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

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

  </div>
</div>