CSS Grid

CSS Grid es un sistema de diseño potente que permite trabajar con cuadrículas bidimensionales, facilitando una disposición más precisa y flexible de los elementos.

Fundamentos de Grid

Grid permite crear columnas y filas, y colocar los elementos dentro de estas celdas. Las configuraciones básicas se definen con las propiedades grid-template-columns, grid-template-rows y gap.

Ejemplo práctico

En este ejemplo se crea una cuadrícula de tres columnas donde los elementos se ajustan automáticamente a las celdas.

Con grid-template-columns: 1fr 1fr 1fr se crean tres columnas iguales y con gap se añade espacio entre los elementos.

Áreas de Grid y regiones nombradas

Con la propiedad grid-template-areas podemos asignar nombres a regiones de la cuadrícula, lo que hace el diseño más legible y fácil de mantener.

En este ejemplo, el encabezado, el contenido principal y el pie se definen como áreas de grid separadas.

Grid responsivo con repeat(), auto-fit y auto-fill

La combinación de repeat(), auto-fit y auto-fill llena dinámicamente el espacio disponible, haciendo que la cuadrícula se adapte automáticamente al tamaño de la pantalla.

En este ejemplo, las columnas de la cuadrícula se ajustan automáticamente al tamaño de la pantalla.

Consejos para usar Grid

La gran ventaja de Grid es que permite gestionar fácilmente diseños complejos. El tamaño de filas y columnas puede variar dinámicamente, lo que lo hace ideal para layouts responsivos.

• Usa la unidad fr (fractional unit) para dimensionar columnas y filas de forma flexible.
• Utiliza grid-template-areas para hacer el código más legible y mantenible.
• Combinar Grid con Flexbox ofrece diseños aún más flexibles y creativos.