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.
| Propiedad | Descripción |
|---|---|
| display: grid | Activa el diseño Grid en el elemento seleccionado. |
| grid-template-columns | Define el número y tamaño de las columnas. |
| grid-template-rows | Define el número y tamaño de las filas. |
| gap | Define el espacio entre columnas y filas. |
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.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
