1

Estoy haciendo un simple container (.box) con 9 containers (.card) dentro de él, quiero que queden centrados y que haya un margen entre ellos (grid-gap). Para ello he utilizado justify-content: center; sin embargo no se centra porque arriba no hay margen que hay en izquierda, derecha y abajo.

.box{
  /*
    margin: 20vh auto;
    text-align: center;
    width: 75%;
    max-width: 650px;
    height: 60vh;
*/
    display: grid;
    grid-template-columns: repeat(3, 30%);
    grid-template-rows: repeat(3, 30%);
    grid-gap: 12px;
    justify-content: center;
}

.card{
    border: 2px solid gray;
    height: 100%;
    border-radius: 6px;
}

introducir la descripción de la imagen aquí

<div className="box">
            <Card />
            <Card />
            <Card />

            <Card />
            <Card />
            <Card />

            <Card />
            <Card />
            <Card />
        </div>

LO que no entiendo es porque horizontalmente la grid si ocupa el 100% y distribuye correctamente la alineación 30% en cada card, como he puesto:

grid-template-columns: repeat(3, 30%);

Y sin embargo para alineación vertical no ocupa el 90% y entonces el espacio de abajo no es ocupado y por eso arriba queda "pegado". Sin embargo he puesto lo mismo que en las columnas:

grid-template-rows: repeat(3, 30%);

1 respuesta 1

1

Puedes lograrlo con lo siguiente:

  • Crea tu rejilla con ayuda de CSS Grid distribuyendo las 9 cards con un espacio de 1fr en grupos de 3
  • A las cajas o cards que estan dentro del contenedor principal, puedes con ayuda de FlexBox acomodar su contenido de forma vertical y de forma horizontal
  • Para lograr que las cards tengan un alto definido, entonces puedes usar grid-template-rows con una medida de 150px para cada una de las filas (de las 3 en cuestión)
  • Opcionalmente con nth-child puedes colocar un color a los elementos pares even y así poder identificar los estilos aplicados
  • Con fines de lectura visual colocamos al body un color de fondo para identificar si tiene un margen respecto de su contenido interno

Tu código pudiera quedar así:

    <style>
      body{
        background-color: yellow;
      }
      .mesa{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        background-color: pink;
        grid-template-rows: 150px 150px 150px;
      }
      .elementos{
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .elementos:nth-child(even) {
        background-color: blue;
      }
    </style>
    
    <div class="mesa">
      <div class="elementos">1</div>
      <div class="elementos">2</div>
      <div class="elementos">3</div>
      <div class="elementos">4</div>
      <div class="elementos">5</div>
      <div class="elementos">6</div>
      <div class="elementos">7</div>
      <div class="elementos">8</div>
      <div class="elementos">9</div>
    </div>

Opcionalmente si necesitas que el elemento que tiene a tu sistema de rejillas posea un margen mas amplio y se separe del mismo, por ejemplo le puedes agregar un margin de 20px

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.