Guía Completa sobre Display Grid en CSS

El modelo CSS Grid es una poderosa herramienta que permite crear diseños de cuadrículas complejas y flexibles con facilidad. A diferencia de flexbox, que trabaja en una sola dimensión (fila o columna), grid maneja ambas dimensiones simultáneamente.

1. Activando Grid en un Contenedor

Para utilizar grid, es necesario definir un contenedor con display: grid y configurar sus columnas y filas.

Explicación:

• display: grid; → Activa el modelo Grid.
• grid-template-columns: 1fr 1fr 1fr; → Define tres columnas de igual tamaño.
• grid-template-rows: auto; → Ajusta automáticamente las filas según el contenido.
• gap: 10px; → Añade espacio entre los elementos.

2. Definir Áreas de la Cuadrícula

Podemos nombrar áreas específicas de la cuadrícula con grid-template-areas.

Explicación:

• grid-template-areas define la disposición de los elementos en la cuadrícula.
• Cada elemento se asigna a un área con grid-area.

3. Posicionar Elementos con grid-column y grid-row

También podemos controlar la posición exacta de cada elemento en la cuadrícula.

Esto significa que el elemento item-1 ocupará desde la columna 1 hasta la 3 y se ubicará en la primera fila.

4. Grid Responsive

Podemos hacer que el diseño sea responsivo con repeat y minmax:

Esto permite que las columnas se ajusten automáticamente según el tamaño de la pantalla.

CSS Grid es una herramienta poderosa para diseñar interfaces flexibles y eficientes. Su versatilidad lo convierte en una opción ideal para diseñar layouts modernos sin necesidad de usar float o flexbox en exceso.

💬 ¿Tienes dudas? Déjalas en los comentarios y comparte este artículo! 🚀