2

Hola tengo este codigo css

.grid-container {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 100px);
    grid-auto-rows: min-content;
    grid-auto-flow: dense;
}

.item1 { width: 100px; height: 125px; }
.item2 { width: 100px; height: 50px; }
.item3 { width: 100px; height: 100px; }
.item4 { width: 100px; height: 50px; }
.item5 { width: 100px; height: 150px; }
.item6 { width: 100px; height: 80px; }
.item7 { width: 100px; height: 125px; }
.item8 { width: 100px; height: 100px; }
.item9 { width: 100px; height: 120px; }

Y este html

    <div class="grid-container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
    </div>

Esto se ve asi:

Problema de espacios en blanco

Alguien sabe como con grid puedo evitar que queden los espacios en blanco y que las celdas se pegen? He probado con span pero no he conseguido el resultado esperado porque divide el espacio en 3 partes iguales (Que son las filas que tiene el grid) y para la parte del 3, 6 y 9 no me sirve.

Se deberia ver asi:

Resutado

2
  • No entiendo el problema, la última imagen es el resultado esperado??
    – Yussef
    Commented el 5 nov. a las 19:08
  • Si, la primera es lo que he estado intentando
    – Anthonyx82
    Commented el 5 nov. a las 19:27

1 respuesta 1

5

Lo que tú quieres es un layout del tipo Masonry. Al día de hoy todos los navegadores están de acuerdo en introducir este layout pero no se ponen de acuerdo en la nomesclatura adecuada, por lo que la salida del estándar está empantanada.

Pienso que con el estándar actual no podrás lograr ese efecto utilizando grid, porque este forma celdas de igual tamaño (como un tablero de ajedrez).

Puedes utilizar columns para lograr ese efecto, pero debes tener en cuenta que hay que reorganizar las cajas internas para establecer el orden que tú quieres, ya que el orden es de arriba hacia abajo y luego de izquierda a derecha.

.grid-container {
 columns: 3;
 gap: 10px;
 width: fit-content;
}

.item1 {
  width: 100px;
  height: 125px;
}

.item2 {
  width: 100px;
  height: 50px;
}

.item3 {
  width: 100px;
  height: 100px;
}

.item4 {
  width: 100px;
  height: 50px;
}

.item5 {
  width: 100px;
  height: 150px;
}

.item6 {
  width: 100px;
  height: 80px;
}

.item7 {
  width: 100px;
  height: 125px;
}

.item8 {
  width: 100px;
  height: 100px;
}

.item9 {
  width: 100px;
  height: 120px;
}

.item{
  margin-bottom:10px;
  background-color:red;
}
<div class="grid-container">
  <div class="item item1">1</div>
  <div class="item item4">4</div>
  <div class="item item7">7</div>
  
  <div class="item item2">2</div>
  <div class="item item5">5</div>
  <div class="item item8">8</div>
  
  <div class="item item3">3</div>
  <div class="item item6">6</div>
  <div class="item item9">9</div>
    
 
</div>

0

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.