Tutorial CSS: CSS Grid para crear layouts y estructuras

¿Qué es CSS Grid, para qué sirve y por qué es importante?

CSS Grid es un sistema de diseño bidimensional que permite a los desarrolladores dividir un contenedor en filas y columnas, y ubicar elementos dentro de estas celdas. A diferencia de otros métodos de diseño como Flexbox, que está optimizado principalmente para la disposición en una dimensión (fila o columna), CSS Grid proporciona un control mucho mayor sobre ambos ejes simultáneamente.

Características principales

1. Estructura bidimensional: Permite crear complejas estructuras de layouts con un control absoluto sobre filas y columnas.
2. Diseño basado en reglas: Define áreas de diseño mediante reglas CSS específicas, facilitando la creación y mantenimiento de estructuras complejas.
3. Responsivo: CSS Grid facilita el diseño responsivo, permitiendo que los elementos del grid cambien su ubicación y tamaño según el tamaño del viewport.
4. Control de alineación: Ofrece propiedades avanzadas para alinear tanto elementos individuales dentro de sus celdas como celdas en su conjunto dentro del grid.

Uso y aplicaciones relevantes

CSS Grid es idóneo para:

• Layouts de página complejos: Es perfecto para páginas que requieren una estructura compleja, como dashboards, aplicaciones web y sistemas de administración de contenido.
• Diseños responsivos: Ajusta automáticamente las áreas de contenido según el tamaño de la pantalla, haciendo que los diseños sean más accesibles en dispositivos de diferentes tamaños.
• Estabilidad y consistencia: Al definir las reglas del grid en CSS, se mantiene una apariencia consistente a lo largo de diferentes navegadores y dispositivos.

Ventajas sobre otros métodos

• Flexbox: Aunque Flexbox es excelente para disposiciones lineales, CSS Grid sobresale en la gestión de estructuras bidimensionales complejas. Puede ser usado en conjunto con Flexbox para obtener lo mejor de ambos métodos.
• Frameworks de CSS: A diferencia de Bootstrap o Foundation, que son sistemas prefabricados que incluyen un conjunto de clases y reglas específicas, CSS Grid permite una mayor personalización y un código más limpio al no depender de clases predefinidas.

Ejemplo de uso

<div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

.item1 {
  grid-column: 1 / 3;  /* Ocupa las columnas 1 y 2 */
  grid-row: 1;         /* Ocupa la fila 1 */
  background-color: lightblue;
}

.item2 {
  grid-column: 3;      /* Ocupa la columna 3 */
  grid-row: 1 / 3;     /* Ocupa las filas 1 y 2 */
  background-color: lightcoral;
}

.item3 {
  grid-column: 1 / 3;  /* Ocupa las columnas 1 y 2 */
  grid-row: 3;         /* Ocupa la fila 3 */
  background-color: lightgreen;
}

Este ejemplo define un contenedor grid con tres columnas de igual tamaño y un espacio de 10px entre las celdas. Cada ítem tiene una posición específica dentro del grid con reglas detalladas que determinan cuántas columnas y filas ocupa.

CSS Grid es una herramienta eficaz y flexible que puede transformar la forma en que se diseñan y desarrollan los layouts web, haciendo que las páginas sean más estructuradas, consistentes y fáciles de mantener.

Conceptos básicos de CSS Grid

CSS Grid introduce una serie de conceptos y terminología específica que son fundamentales para comprender y utilizar esta tecnología de manera efectiva. A continuación se describen los conceptos más esenciales:

Grid container

El grid container o contenedor de grid es el elemento en el que se aplica la propiedad display: grid. Este contenedor contiene todos los elementos hijos que se convertirán en ítems de grid.

.container {
    display: grid;
}

Grid items

Los grid items o ítems de grid son los elementos hijos directos del grid container. Cada uno de estos ítems puede ser colocado y dimensionado dentro de la estructura del grid mediante propiedades específicas.

.container {
    display: grid;
}

.item {
    background-color: lightgray;
    border: 1px solid #333;
}

Grid lines

Las grid lines o líneas de grid son las líneas que definen las filas y columnas en el grid. Estas líneas están numeradas y pueden ser usadas para posicionar los grid items.

.container {
    display: grid;
    grid-template-columns: 100px 200px; /* Define dos columnas */
    grid-template-rows: 50px 50px; /* Define dos filas */
}

/* Este ítem se ubicará entre la primera y segunda línea de columna y fila */
.item1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

Grid tracks

Los grid tracks son las filas y columnas mismas en el grid container. Se definen usando las propiedades grid-template-columns y grid-template-rows.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas de igualdad */
    grid-template-rows: auto 1fr; /* Dos filas, la primera de altura automática, la segunda de fracción flexible */
}

Grid cells

Una grid cell o celda de grid es la intersección de una fila y una columna. Es la unidad básica dentro del grid container que puede ser ocupada por un grid item.

Grid areas

Las grid areas o áreas de grid son áreas rectangulares dentro del grid container que pueden ser ocupadas por uno o más grid items. Se definen usando la propiedad grid-template-areas y los grid items pueden posicionarse usando la propiedad grid-area.

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

Grid gap

El grid gap es el espacio entre filas y columnas. Se define usando las propiedades grid-row-gap, grid-column-gap y grid-gap.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 200px;
    grid-gap: 10px; /* Espacio de 10px entre filas y columnas */
}

Estos conceptos son la base para entender y trabajar con CSS Grid de manera efectiva. Al dominar estos términos y sus aplicaciones, se puede crear cualquier tipo de estructura y diseño en una página web de manera organizada y flexible.

Propiedades y uso del contenedor Grid

El contenedor Grid es el núcleo de CSS Grid, y para usar su potencial completo, es fundamental conocer y dominar sus propiedades. Estas propiedades nos permiten definir la estructura del Grid en términos de filas, columnas y áreas.

display: grid y display: inline-grid

La primera propiedad que activará el comportamiento de Grid en un contenedor es display.

• display: grid; convierte al elemento en un contenedor Grid de bloque.
• display: inline-grid; lo convierte en un contenedor Grid en línea, permitiendo que el contenedor se comporte como un elemento en línea mientras que sus hijos actúan como ítems de grid.

.container-block {
    display: grid;
}

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

grid-template-rows y grid-template-columns

Estas propiedades definen las filas y columnas del Grid respectivamente. Se pueden especificar las dimensiones de cada track (fila o columna) en unidades absolutas como px, relativas como %, fracciones (fr) o combinaciones de estas.

/* Definición de tres columnas y dos filas */
.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;  /* Tres columnas: una fracción, dos fracciones, una fracción */
    grid-template-rows: 100px auto 50px; /* Tres filas: 100px, tamaño automático, 50px */
}

grid-template-areas

Permite definir áreas dentro del Grid, asignando nombres a diferentes regiones. Se usan cadenas de texto para mapear estas áreas.

/* Definiendo áreas dentro del grid */
.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 50px 1fr 50px;
    grid-template-areas:
        "header header header"
        "sidebar content sidebar"
        "footer footer footer";
}

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

grid-auto-rows y grid-auto-columns

Estas propiedades definen el tamaño para cualquier fila o columna nueva que se cree de forma automática.

/* Definiendo el tamaño de filas y columnas generadas automáticamente */
.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: 100px; /* Filas generadas automáticamente tendrán una altura de 100px */
    grid-auto-columns: 50px; /* Columnas generadas automáticamente tendrán un ancho de 50px */
}

grid-auto-flow

Controla la colocación automática de los ítems de Grid que no tienen una posición específica dentro del Grid. Los valores posibles son row, column, row dense y column dense.

/* Control del flujo automático de los ítems del grid */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;  /* Por defecto, colocación en filas */
}

grid-gap, grid-row-gap y grid-column-gap

Estas propiedades permiten definir el espacio entre filas y columnas.

/* Definiendo espacios entre las filas y columnas del grid */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px; /* Espacio de 20px entre filas y columnas */
    grid-row-gap: 10px; /* Espacio de 10px entre filas */
    grid-column-gap: 15px; /* Espacio de 15px entre columnas */
}

justify-items y align-items

Estas propiedades permiten alinear los ítems del Grid dentro de sus celdas a lo largo del eje horizontal y vertical respectivamente.

/* Alineación de ítems dentro de sus respectivas celdas */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center; /* Alineación horizontal de los ítems al centro */
    align-items: start;    /* Alineación vertical de los ítems al inicio */
}

justify-content y align-content

Permiten alinear la totalidad de la estructura de Grid dentro del contenedor Grid a lo largo de los ejes horizontal y vertical.

/* Alineación global del grid */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between; /* Distribución horizontal con igual espacio entre los ítems */
    align-content: center;          /* Alineación vertical del grid al centro */
}

Estas propiedades del contenedor Grid son esenciales para establecer una base sólida en cualquier diseño de layout bidimensional. La combinación y manipulación efectiva de estas propiedades permitirá crear estructuras complejas y responsivas con gran precisión y control.

Propiedades y uso de los elementos Grid

Los elementos Grid o ítems dentro de un contenedor Grid pueden ser manipulados utilizando una variedad de propiedades CSS. Estas propiedades permiten controlar la posición, el tamaño y el comportamiento de los ítems dentro de la estructura definida por el contenedor Grid.

grid-column y grid-row

Estas propiedades definen en qué línea de inicio y en qué línea de finalización debe estar un ítem Grid. Usando un solo valor, se especifica la línea de inicio, mientras que una notación con dos valores (inicio/fin) permite definir ambas líneas.

.item1 {
    grid-column: 1 / 3; /* Ocupa desde la línea 1 hasta la 3 */
    grid-row: 1 / 2;    /* Ocupa desde la línea 1 hasta la 2 */
}

.item2 {
    grid-column: 3;     /* Ocupa la línea 3 */
    grid-row: 2 / 4;    /* Ocupa desde la línea 2 hasta la 4 */
}

grid-area

Combina tanto grid-column como grid-row en una sola propiedad, permitiendo definir de manera compacta la ubicación de un ítem Grid.

.item3 {
    grid-area: 1 / 2 / 3 / 4; /* Inicia en la fila 1, columna 2 y termina en la fila 3, columna 4 */
}

justify-self y align-self

Estas propiedades permiten alinear individualmente cada ítem Grid dentro de su celda a lo largo del eje horizontal (justify-self) y el eje vertical (align-self). Los valores posibles incluyen start, end, center y stretch.

.item1 {
    justify-self: center; /* Centrado horizontalmente */
    align-self: start;    /* Alineado al inicio verticalmente */
}

.item2 {
    justify-self: end;    /* Alineado al final horizontalmente */
    align-self: stretch;  /* Estirado para ocupar todo el espacio verticalmente */
}

grid-auto-columns y grid-auto-rows

Definen el tamaño para las columnas y filas generadas automáticamente, aunque son más útiles cuando se combinan con las propiedades de auto-placement.

.item1 {
    grid-auto-columns: 50px;
    grid-auto-rows: 100px;
}

order

Similar a la propiedad order de Flexbox, esta propiedad permite reordenar los ítems Grid sin cambiar el HTML. Los ítems con un valor menor de order aparecen primero.

.item1 {
    order: 2; /* Se posiciona después de los ítems con order 1 */
}

.item2 {
    order: 1; /* Se posiciona antes que los ítems con order 2 */
}

z-index

Controla el apilamiento de los ítems Grid, definiendo qué ítem se superpone sobre otro.

.item1 {
    z-index: 10; /* Se pondrá por encima de cualquier ítem con z-index menor */
}

.item2 {
    z-index: 5;
}

Ejemplo completo

Un ejemplo que combina varias de estas propiedades juntos para ilustrar su uso conjunto:

<div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  position: relative;
  border: 2px purple solid;
  height: 80vh;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
  background-color: lightblue;
}

.item2 {
  grid-column: 2 / 4;
  grid-row: 2;
  z-index: 1;
  background-color: coral;
}

.item3 {
  grid-column: 1 / 2;
  grid-row: 3;
  align-self: stretch;
  background-color: lightgreen;
}

En este caso, .item1 ocupará las columnas 1 y 2 de la primera fila, mientras que .item2 ocupará las columnas 2 y 3 de la segunda fila, se posicionará antes en el orden visualmente pero se apilará sobre otros ítems debido a su z-index. item3 se alineará completamente a la izquierda en la tercera fila y ocupará todo el espacio vertical disponible.

Propiedades de alineación y justificación del contenedor Grid

En CSS Grid, alinear y justificar los elementos dentro de un contenedor Grid se logra principalmente mediante las propiedades justify-content, align-content, justify-items y align-items. Estas propiedades permiten posicionar los elementos del Grid y el Grid en su totalidad con gran precisión a lo largo de los ejes horizontal y vertical.

justify-content controla la alineación de las columnas del Grid en el eje horizontal del contenedor. Los valores posibles incluyen:

• start: Coloca las columnas al inicio del contenedor.
• end: Coloca las columnas al final del contenedor.
• center: Centra las columnas en el contenedor.
• space-between: Distribuye las columnas dejando el mismo espacio entre ellas.
• space-around: Deja un espacio igual alrededor de cada columna.
• space-evenly: Deja un espacio igual entre las columnas y también en los extremos del contenedor.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
}

align-content controla la alineación de las filas del Grid en el eje vertical del contenedor. Los valores posibles son:

• start: Coloca las filas al inicio del contenedor.
• end: Coloca las filas al final del contenedor.
• center: Centra las filas en el contenedor.
• space-between: Distribuye las filas dejando el mismo espacio entre ellas.
• space-around: Deja un espacio igual alrededor de cada fila.
• space-evenly: Deja un espacio igual entre las filas y también en los extremos del contenedor.
• stretch: Estira las filas para cubrir el área completa del contenedor.

.container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    align-content: center;
}

justify-items determina cómo se alinean los ítems de Grid dentro de sus celdas a lo largo del eje horizontal. Los valores posibles incluyen:

• start: Alinea los ítems al inicio de sus celdas.
• end: Alinea los ítems al final de sus celdas.
• center: Centra los ítems en sus celdas.
• stretch: Estira los ítems para llenar el ancho de sus celdas.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
}

align-items determina cómo se alinean los ítems de Grid dentro de sus celdas a lo largo del eje vertical. Los valores posibles son:

• start: Alinea los ítems al inicio de sus celdas.
• end: Alinea los ítems al final de sus celdas.
• center: Centra los ítems en sus celdas.
• stretch: Estira los ítems para llenar la altura de sus celdas.

.container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    align-items: start;
}

Usando estas propiedades de justificación y alineación, se puede manipular fácilmente tanto la distribución global de los elementos dentro del contenedor Grid como la posición de los ítems dentro de sus respectivas celdas. Estas herramientas son esenciales para crear diseños sofisticados y responsivos, permitiendo un control detallado del layout y su presentación.