CSS Grid

CSS Grid es un sistema de diseño bidimensional que permite crear layouts de página complejos utilizando una serie de filas y columnas. A diferencia de Flexbox, que es un sistema de diseño unidimensional, CSS Grid te permite trabajar tanto en el eje horizontal como en el vertical de manera simultánea.

Propiedad display: grid

Para activar CSS Grid, el contenedor debe tener la propiedad display configurada a grid. Esto convierte el contenedor en un contenedor de grid y a sus elementos hijos en "items" del grid.


.container {
    display: grid;
}

Este código convierte el contenedor en un grid, permitiendo que los elementos dentro de él se organicen según las reglas de CSS Grid.

Definir filas y columnas con grid-template-rows y grid-template-columns

Las propiedades grid-template-rows y grid-template-columns se utilizan para definir el tamaño de las filas y columnas en el grid. Puedes especificar valores en píxeles, porcentajes, fracciones del espacio disponible (fr) y otras unidades.

Ejemplo de filas y columnas:


.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 100px auto;
}

Este código define un grid con tres columnas: la primera columna tiene un ancho de 200 píxeles, la segunda columna ocupa el espacio restante disponible (1fr), y la tercera columna tiene un ancho de 200 píxeles. Las filas tienen un alto fijo de 100 píxeles para la primera fila, y la segunda fila se ajusta automáticamente al contenido.

Propiedad grid-gap (o gap)

La propiedad grid-gap se utiliza para definir el espacio entre las filas y columnas de un grid. También puede usarse la propiedad abreviada gap.


.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}

Este código establece un espacio de 20 píxeles entre cada fila y columna del grid.

Colocación de items en el grid

Una vez que hayas definido el grid, puedes colocar los elementos dentro de él usando las propiedades grid-column y grid-row. Estas propiedades te permiten especificar en qué columna y fila debe colocarse un item del grid.

Ejemplo de colocación de un item:


.item {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

Este código coloca un item que ocupa las dos primeras columnas (de la columna 1 a la 3) y la primera fila (de la fila 1 a la 2).

Propiedades abreviadas: grid-area

La propiedad grid-area permite colocar un item dentro de una celda o área definida por una combinación de filas y columnas. Es una forma abreviada de usar las propiedades grid-row-start, grid-column-start, grid-row-end y grid-column-end.


.item {
    grid-area: 1 / 1 / 2 / 3;
}

Este código coloca el item en la primera fila, desde la primera columna hasta la tercera columna, ocupando todo ese espacio.

Definir áreas con grid-template-areas

La propiedad grid-template-areas permite definir áreas con nombres, lo que facilita la organización de un layout complejo y su asignación. Cada área es un bloque en el que se pueden colocar los elementos del grid.


.container {
    display: grid;
    grid-template-areas: 
    "header header header"
    "main sidebar sidebar"
    "footer footer footer";
}
  
.item-header { grid-area: header; }
.item-main { grid-area: main; }
.item-sidebar { grid-area: sidebar; }
.item-footer { grid-area: footer; }

Este código define un grid con cuatro áreas: header, main, sidebar y footer. Cada área se coloca en su correspondiente elemento utilizando la propiedad grid-area.

Conclusión

CSS Grid es una herramienta extremadamente potente y flexible para la creación de layouts complejos. Gracias a su sistema de filas y columnas, y la posibilidad de colocar elementos en cualquier parte del grid, te permite crear estructuras avanzadas con un control total sobre el espacio. Además, la propiedad grid-template-areas hace que trabajar con layouts complejos sea más intuitivo y fácil de mantener.

Anterior Siguiente