Usando CSS Grid: Posicionando elementos

Al usar CSS Grid, es probable que necesitemos que algun elemento inicie y termine en un lugar especificio, y no en el lugar que se pone por default.

Para hacer esto hacemos uso de grid-start y grid-end, indicando las posiciones donde inicia y termina el elemento, teniendo de ejemplo la siguiente estructura:

 < div id="content">
 < div class="uno">lorem </div>
 < div class="dos">2 </div>
 < div class="tres">3 </div>
 < div class="cuatro">4 </div>
 < div class="cinco">5 </div>
 < div class="seis">6 </div>
 </div>

Y teniendo la siguiente declaracion de el grid:

#content {
 max-width: 1110px;
 margin: 0 auto;
display: grid;
 grid-gap: 5px;
 grid-template-columns:repeat(6, 1fr);
 grid-template-rows: repeat(4, minmax(150px, auto));
 }

Vemos que tenemos 6 columnas, con un elemento div dentro cada una, pero tambien tenemos 4 filas, actualmente vacias, que podemos usar para color elementos.

En este caso tenemos un grid de 6×4 en el cual podemos empezar a colocar elementos de la siguiente manera:

.uno{
 grid-column-start: 1;
 grid-column-end:3;
 }

Aca indicamos que el bloque 1, inicie en la posicion 1 y termine en la posicion 3, lo cual nos da como resultado algo como:

La cual se puede abreviar de la siguiente forma:

 .uno{
 grid-column:1/3;
 }

Tambien podemos hacer que un elemento se coloque en mas de un lugar de forma vertical, modificando la posicion de la fila, de esta forma:

.tres{
 grid-column: 1/4;
 grid-row:2/4;
 }

Lo cual resulta en algo como esto:

Podemos mover un elemento a la derecha dejando espacio en blanco a la izquierda, de esta forma:

.cinco{
 grid-column: 3/5;
 }

Lo cual nos da algo como:

Y por ultimo, para posicionar el bloque 6 a el lado izquierdo del bloque 5, podemos hacer algo como:

.seis{
 grid-row: 4/5;
 grid-column: 1/3;
 }

Lo cual nos da el resultado final:

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s