GRID LAYOUT EN CSS3
Al igual que ocurre con el sistema Flexbox, en el sistema Grid ó de rejilla, va a ser imprescindible que todo nuestro código esté alojando dentro de un <div> ya que este sistema no actuará en el resto de nuestra página sino únicamente dentro del <div> que creemos al efecto.DISPLAY
Adicionalmente a ese <div> le aplicaremos una clase cuyo display estableceremos en grid:
o alternativamente de este modo:
que también se puede reducir mucho:
Referencias para el estudio de CSS GRID LAYOUT:
display: grid;
SEPARACIÓN ENTRE ELEMENTOS
También podremos establecer la separación entre nuestros elementos mediante la propiedad grid-gap:
grid-gap: 50px;
NÚMERO DE COLUMNAS
e incluso el número de "columnas" que deseemos presentar estableciendo un valor numérico en porcentaje por cada elemento del siguiente modo:
grid-template-columns: 25% 25% 25% 25%;
o alternativamente de este modo:
grid-template-columns: repeat(4, 25%);
NÚMERO DE FILAS
También podremos, con Grid, establecer el número de Filas que deseemos visuales de esta con la propiedad grid-template-rows así:
grid-template-rows: 33% 33% 33%;
grid-template-rows: repeat(3, 1fr);
EXPANDIR HORIZONTALMENTE EL ANCHO DE LAS COLUMNAS
Ahora bien, si vamos a necesitar expandir el ancho de una columna debemos recurrir a la combinación de las propiedades de grid-column de esta manera:
o de forma más abreviada en una única línea de código como sigue:
grid-column-start: 1;
grid-column-end: 3;
o de forma más abreviada en una única línea de código como sigue:
grid-column: 1 / 3;
EXPANDIR VERTICALMENTE LA ALTURA DE LAS FILAS
Si, por contra, lo que vamos a necesitar es expandir verticalmente una fila recurriremos a las propiedades de grid-row como se muestra a continuación:
grid-row-start: 2;
grid-row-end: 4;
que también se puede reducir mucho:
grid-row: 2 / 4;
Referencias para el estudio de CSS GRID LAYOUT:
No hay comentarios:
Publicar un comentario