Qué es CSS Grid Layout

Qué es CSS Grid Layout

CSS grid layout es un módulo de maquetación CSS que nos permite generar layouts en nuestras páginas web de una forma más eficiente, está basado en un sistema de grillas (filas y columnas) y además es soportado por todos los navegadores modernos.

Para empezar a utilizar grid tenemos que agregar la propiedad display: grid; a un contenedor padre.
Establecer los tamaños de columnas con la propiedad grid-template-columns y los tamaños de filas con la propiedad grid-template-rows.
Los elementos hijos con grid-column y grid-row respectivamente.

Conceptos Fundamentales sobre CSS Grid Layout

grid container es el elemento padre, y hay que asignarle un display: grid; dentro de la hoja de estilos.
grid item son los hijos directos de un grid container, y son los componentes que vamos a poder colocar a nuestro gusto dentro del layout.

En este ejemplo se muestra una grilla básica con el contenedor padre y sus elementos hijos:

<!-- Grid container -->
  <section class="container">
<!-- Grid item --> 
    <div class="item">contenido 1</div>
    <div class="item">contenido 2</div>
    <div class="item">contenido 3</div>
    <div class="item">contenido 4</div>
    <div class="item">contenido 5</div>
    <div class="item">contenido 6</div> 
  </section>

grid line son lineas invisibles que dividen la grilla y separan las columnas y filas. .
grid-lines-css-grid
grid track espacio entre dos líneas adyacentes y se corresponde con las filas y columnas.
grid-track-css-grid
grid cell es un componente dentro de la grilla y se lo denomina como celda, espacio entre dos filas adyacentes y 2 columnas adyacentes.
grid-cell-css-grid
grid area es un espacio conformado por 4 grid lines.
grid-area-css-grid
grid explicito es cuando nosotros definimos el numero de filas o columnas.
grid implicito es cuando tenemos filas o columnas que no definimos pero son parte de nuestro grid.
css-grid-explicito-e-implicito

Propiedades en CSS Grid Layout

El contenedor padre puede adquirir los siguientes valores

.container{
  display: grid | inline-grid | subgrid;
}

Para agregar filas y columnas utilizamos las propiedades
grid-template-columns y grid-template-rows.

En este ejemplo creamos un layout con tres columnas de 1fr (fracción) y dos filas de 200px;

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(2, 200px);
}
Propiedades en CSS Grid Layout

Esto mismo lo podemos simplicaficar en una sola linea
grid-template: 200px 200px / 1fr 1fr 1fr;

fr (fracciones): unidad de medida, distrubuye el espacio disponible en formas iguales.

grid-column-gap espaciado entre columnas - grid-column-gap: 10px;
grid-row-gap espaciado entre filas - grid-row-gap: 30px;
grid-gap espaciado entre filas y columnas - grid-gap: 30px 10px;

Áreas en CSS Grid Layout

grid-template-areas define multiples áreas dentro del contenedor, mediante un nombre personalizado para cada una de ellas, las cuales, nos permitirán modificar de manera dinámica la ubicación y cuantas filas o columnas abarcaran nuestros items en la cuadricula.

Para definir las áreas utilizamos comillas para indicar una fila y para las columnas utilizamos un nombre personalizado o un punto(.) para que la celda quede vacía, y los valores los separamos con un espacio.

<!-- Grid container -->
  <section class="container">
<!-- Grid item --> 
    <div class="item header">header</div>
    <div class="item sidebar">sidebar</div>
    <div class="item contenido">contenido</div>
    <div class="item footer">footer</div> 
  </section>
.container{
  display: grid;
  grid-template: 100px 1fr 150px / 200px 1fr;
  grid-gap: 10px;
  height: 100vh;
  
  grid-template-areas: "header header"
                       "sidebar contenido"
                       "footer footer";
}

Aquí estamos definiendo una cuadricula de 3*2 , en la cual, asignamos multiples áreas identificadas con 4 nombres diferentes que llenaran la cuadricula cuando los asignemos a los hijos directos del contenedor.

.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.contenido {
    grid-area: contenido;
}
.footer {
    grid-area: footer;
	}

El resultado es el siguiente

Áreas en CSS Grid Layout

Unidades de medida y funciones en CSS Grid Layout

Para definir el tamaño de las filas y columnas podemos utilizar cualquier unidad de medida, pero hay ciertos valores y funciones que nos pueden ayudar a hacerlo mas fácilmente:

fr (fracciones) es una unidad de medida exclusiva para CSS Grid que representa una fracción del espacio disponible en el contenedor de la cuadricula. Distrubuye el espacio disponible en formas iguales. grid-template: 1fr 2fr 3fr / repeat(4, 1fr);

auto define un tamaño automático para una fila o columna, según el alto si es fila, o ancho si es columna. grid-template: 100px / auto auto;

repeat (cantidad, tamaño) esta función nos permite repetir un valor x cantidad de veces. grid-template: 100px / repeat(auto-fill, 250px);

minmax() define un ancho flexible entre 2 números (ancho minimo y maximo) para una fila o columna. grid-template: 100px / minmax(100px, 500px);

Definiendo el tamaño de las columnas y filas dentro de un grid

Para definir el número de grid lines que ocupará un elemento, usamos la propiedad grid-column-start y grid-column-end, esto para definir desde que línea comenzará el elemento y en que línea terminará.

Para resumir estos parámetros podemos usar la propiedad grid-column y de esta forma ponerle los parámetros en los que empieza y termina el elemento (separados por /).

Cuando queremos ahorrarnos los parámetros de inicio y final de un elemento, podemos usar -1 y el elemento ocupara el spacio hasta la última linea.

Para indicar que queremos usar espacios y no líneas, usamos de antemano “span”.

Para definir el tamaño de filas dentro de un grid es muy parecido a definir columnas, solo que usamos grid-row.

Definiendo el tamaño de las columnas y filas dentro de un grid

Definiendo el nombre de lineas en CSS Grid Layout

Una buena estrategia a la hora de especificar el tamaño de filas y columnas, es añadiéndole nombre a las líneas, en las propiedades grid-template-columns y grid-template-rows, ya que es una buena guía implementar los espacios sin tener necesidad de memorizar el número de cada línea.

Para definir las líneas lo hacemos en el contenedor padre con la propiedad grid-template y se ponen los nombres entre [].
grid-template-columns: [inicio] 1fr [linea2] 1fr [final];
grid-template-rows: [inicio] 200px [inicio2] 200px [final];

Luego para usarlos lo hacemos en cada elemento hijo con las propiedades
grid-column y grid-row

grid-column: inicio / destacado2-end;
grid-row: inicio / final;

Manejando el grid implícito en CSS Grid Layout

El grid implicito va a estar formado por todos los elementos html que no estan siendo contemplados dentro de las filas y columnas que tenemos dentro de CSS, es decir todos esos elementos que no han sido manejados de una manera explicita.

El valor por defecto del grid implicito es row con la propiedad grid-auto-flow podemos cambiarlo, los valores pueden ser row o column.
grid-auto-flow: column; o grid-auto-flow: row;

Para manejar nuestro grid implicito contamos con dos propiedades
grid-auto-column: valores; y grid-auto-row: valores;

Alineación de contenido en CSS Grid Layout

En el grid existe la forma de hacer que los grid-item se alineen según ciertas propiedades.

justify-items permite alinear el contenido (grid-item) de forma horizontal. Sus valores pueden ser: start, end, center, stretch. Esta propiedad la usa el padre.

Justify-item: start; alinea los elementos (grid-item) hacia el principio (izquierda) y los elementos (grid-item) tendrán como ancho de dimensión el ancho de su contenido.

justify-items: end; alinea los elementos (grid-item), hacia el final (derecha) y los elementos (grid-item) al igual que start tendrán como ancho de dimensión el ancho de su contenido.

justify-items: center; alinea los elemento (grid-item), hacia el centro (medio) y los elementos (grid-item) al igual que start y que end tendrán como ancho de dimensión el ancho de su contenido.

justify-items: stretch; va a estirar el contenido según se halla definido anteriormente en: grid-template, grid-template-columns, grid-template-rows.

align-items permite alinear el contenido (grid-item) de forma vertical. Sus valores pueden ser: start, end, center, stretch. Esta propiedad la usa el padre.

align-items toma los mismo valores que justify-content pero su alineación lo hace de forma vertical.

El valor por defecto de align-item y justify-item es el strectch.

strectch va a estirar el contenido según se haya definido anteriormente en: grid-template, grid-template-columns, grid-template-rows.

Para alinear un solo elemento en específico le asignamos las propiedades justify-self y align-self al elemento hijo

align-self alinea un elemento (grid item) de forma vertical e independiente a los demás elementos que pertenecen al grid, puede tomar valores cómo : start, center, end, stretch. Propiedad que usa el hijo.

justify-selt alinea un elemento (grid-item) de forma horizontal e independiente a los demás elementos que pertenecen al grid, puede tomar valores cómo: start, center, end, strectch

Alineación de filas y columnas en CSS Grid Layout

A diferencia de la explicacion anterior que era para alinear el contenido, esta es algo parecido, solo que sirve para alinear columnas y filas. Manejan propiedades parecidas:

justify-content con esta propiedad alineamos las columnas de manera horizontal según los valores ingresados.
Los valores pueden ser start (valor por defecto), end, center, strech, space-around,
space-between, space-evenly.

aling-content con esta propiedad alineamos las filas de manera vertical según los valores ingresados.
Los valores pueden ser start (valor por defecto), end, center, strech, space-around,
space-between, space-evenly.

Enlaces de Interés

Mostrar comentarios

Recibe los últimos artículos directamente en tu buzón.