Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/02/2018, 02:34
Avatar de gogupe
gogupe
 
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 897
Antigüedad: 17 años, 9 meses
Puntos: 32
Crear grid por columna

Hola a todos.

Estoy usando este código para crear una maquetación de una página al estilo de un periódico.

La idea es que haya tres columnas, los resultados se vayan introduciendo por columna, para ir creando la página.
Código CSS:
Ver original
  1. grid-auto-flow: column;

EL ejemplo que he estoy cogiendo de la web w3schools.com es este:

Código CSS:
Ver original
  1. .grid-container {
  2.   display: grid;
  3.   grid-template-columns: auto auto auto;
  4.   grid-template-rows: auto auto;
  5.   grid-gap: 10px;
  6.   background-color: #2196F3;
  7.   padding: 10px;
  8. }
  9. .grid-container>div {
  10.   background-color: rgba(255, 255, 255, 0.8);
  11.   text-align: center;
  12.   padding:20px 0;
  13.   font-size: 30px;
  14. }

Código HTML:
Ver original
  1. <div class="grid-container" style="grid-auto-flow: column;">
  2.   <div class="item1">1</div>
  3.   <div class="item2">2</div>
  4.   <div class="item3">3</div>
  5.   <div class="item4">4</div>
  6. </div>

Pues bien, no se como hacer para que cuando se introduzca x elementos, se vayan poniendo debajo, que solo haya 3 columnas, con este ejemplo vas creciendo las columnas hacia la derecha. He estado jugando con grid-template-rows, pero no se muy bien como hacerlo.

Muchas gracias.
__________________
Somos una serie de acontecimiento que puede venir al caso en un momento dado.