My Css card grids are stacked on each why is it not working-CodePudding

So I made this card design and I duplicate it so fill the rest of the space but they cards are stacked on each other and when I used repeat 1fr for just one card it spans the entire page. even though I set the width to be 100% so it doesnt take up the entire page but only inside the grid the grid container.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
 :root {
  --ff-primary: Roboto, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.2%;
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

main {
  margin: 20px 0 0 20px;
}

.card {
  display: grid;
  grid-column: 1/2;
}

.card>* {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  /*border: 1px solid hotpink;*/
}

.container__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.card__img {
  width: 100%;
  aspect-ratio: 1 / 1.22;
  object-fit: cover;
  box-shadow: 0 .30rem 5rem rgba(157, 7, 7, 0.8);
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 9px;
}

.card__items {
  background-color: #ffffff;
  margin: .5rem .4rem -1rem;
  padding: .5rem;
  align-self: end;
  box-shadow: 0 .25rem 5rem rgb(0 0 0 / .8);
  border-radius: 10px;
  transition: 1.5s ease-in-out;
}

.card__items:hover {
  background-color: #bf3d3d;
  color: #ffffffff;
  transform: translateY(-20px);
}

.card__title,
.card__desc {
  font-size: 1.4rem;
  line-height: 1.2;
}

.card__title {
  color: #000000;
  font-weight: 1000;
  font-size: large;
  text-align: center;
}

<main>
  <div >

    <div >

      <img src="fungi.jpg"  alt="Foungi on a piece of wood">
      <div >
        <div >The Asapragi Fungi</div>
        <div >Super rare fungi found in south america</div>
      </div>
    </div>

    <div >

      <img src="fungi.jpg"  alt="Foungi on a piece of wood">
      <div >
        <div >The Asapragi Fungi</div>
        <div >Super rare fungi found in south america</div>
      </div>
    </div>

    <div >

      <img src="fungi.jpg"  alt="Foungi on a piece of wood">
      <div >
        <div >The Asapragi Fungi</div>
        <div >Super rare fungi found in south america</div>
      </div>
    </div>

    <div >

      <img src="fungi.jpg"  alt="Foungi on a piece of wood">
      <div >
        <div >The Asapragi Fungi</div>
        <div >Super rare fungi found in south america</div>
      </div>
    </div>

    <div >

      <img src="fungi.jpg"  alt="Foungi on a piece of wood">
      <div >
        <div >The Asapragi Fungi</div>
        <div >Super rare fungi found in south america</div>
      </div>
    </div>

    <div >

      <img src="fungi.jpg"  alt="Foungi on a piece of wood">
      <div >
        <div >The Asapragi Fungi</div>
        <div >Super rare fungi found in south america</div>
      </div>
    </div>

    <div >

      <img src="fungi.jpg"  alt="Foungi on a piece of wood">
      <div >
        <div >The Asapragi Fungi</div>
        <div >Super rare fungi found in south america</div>
      </div>
    </div>



  </div>



</main>

CodePudding user response：

Do you mean something like this?? I just put a grid gap to have a space. you can also try justify-content and space it evenly if you want. Let me know

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');


:root {
    --ff-primary: Roboto, sans-serif;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.2%;
    font-family: Roboto, Arial, Helvetica, sans-serif;


}

main {
    margin: 20px 0 0 20px;
}



.card {
    display: grid;
    grid-column: 1/2;


}

.card>* {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    /*border: 1px solid hotpink;*/

}

.container__grid {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;

}

.card__img {
    width: 100%;
    aspect-ratio: 1 / 1.22;
    object-fit: cover;
    box-shadow: 0 .30rem 5rem rgba(157, 7, 7, 0.8);
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    border-bottom-left-radius: 9px;

}

.card__items {
    background-color: #ffffff;
    
    padding: .5rem;
    align-self: end;
    box-shadow: 0 .25rem 5rem rgb(0 0 0 / .8);
    border-radius: 10px;
    transition: 1.5s ease-in-out;



}

.card__items:hover {
    background-color: #bf3d3d;
    color: #ffffffff;
    transform: translateY(-20px);

}

.card__title,
.card__desc {
    font-size: 1.4rem;
    line-height: 1.2;
}

.card__title {
    color: #000000;
    font-weight: 1000;
    font-size: large;
    text-align: center;
}

 <main>
        <div >

            <div >

                <img src="fungi.jpg"  alt="Foungi on a piece of wood">
                <div >
                    <div >The Asapragi Fungi</div>
                    <div >Super rare fungi found in south america</div>
                </div>
            </div>

            <div >

                <img src="fungi.jpg"  alt="Foungi on a piece of wood">
                <div >
                    <div >The Asapragi Fungi</div>
                    <div >Super rare fungi found in south america</div>
                </div>
            </div>

            <div >

                <img src="fungi.jpg"  alt="Foungi on a piece of wood">
                <div >
                    <div >The Asapragi Fungi</div>
                    <div >Super rare fungi found in south america</div>
                </div>
            </div>

            <div >

                <img src="fungi.jpg"  alt="Foungi on a piece of wood">
                <div >
                    <div >The Asapragi Fungi</div>
                    <div >Super rare fungi found in south america</div>
                </div>
            </div>

            <div >

                <img src="fungi.jpg"  alt="Foungi on a piece of wood">
                <div >
                    <div >The Asapragi Fungi</div>
                    <div >Super rare fungi found in south america</div>
                </div>
            </div>

            <div >

                <img src="fungi.jpg"  alt="Foungi on a piece of wood">
                <div >
                    <div >The Asapragi Fungi</div>
                    <div >Super rare fungi found in south america</div>
                </div>
            </div>

            <div >

                <img src="fungi.jpg"  alt="Foungi on a piece of wood">
                <div >
                    <div >The Asapragi Fungi</div>
                    <div >Super rare fungi found in south america</div>
                </div>
            </div>



        </div>



    </main>

CodePudding user response：

You can give padding to each card and get gap between cards.