Foros del Web » Creando para Internet » CSS »

Crear grid por columna

Estas en el tema de Crear grid por columna en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/02/2018, 02:34
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 897
Antigüedad: 17 años, 8 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.
  #2 (permalink)  
Antiguo 28/02/2018, 05:26
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 22 años, 1 mes
Puntos: 177
Respuesta: Crear grid por columna

Código CSS:
Ver original
  1. .wrapper {
  2.   display: grid;
  3.   grid-template-columns: repeat(3, 1fr);
  4.   grid-gap: 10px;
  5.   grid-auto-rows: minmax(100px, auto);
  6. }
  7. .columna{
  8. background-color: #ff0;
  9. }

Código HTML:
Ver original
  1. <div class="wrapper">
  2.   <div class="columna">1</div>
  3.   <div class="columna">2</div>
  4.   <div class="columna">3</div>
  5.   <div class="columna">4</div>
  6.   <div class="columna">5</div>
  7.   <div class="columna">6</div>
  8. </div>

Slds.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #3 (permalink)  
Antiguo 28/02/2018, 06:35
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 897
Antigüedad: 17 años, 8 meses
Puntos: 32
Respuesta: Crear grid por columna

Hola.

Asi la inserción es de horizontal de izquierda a derecha. Lo que pretendo hacer es que haya 3 columnas y que se introduzca de arriba a abajo, configurandolo como grid-auto-flow: column;

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

Etiquetas: auto, columna, grid
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:57.