CSS Grid Layout
¿Qué es CSS Grid?
CSS Grid es un sistema de diseño en dos dimensiones que nos permite organizar el contenido en filas y columnas de una manera mucho más flexible y poderosa que los sistemas tradicionales (como floats o flexbox).
Con Grid podemos crear desde diseños simples hasta estructuras de páginas web completas, controlando tanto el eje horizontal como el vertical.
¿Por qué usar CSS Grid?
Permite trabajar con filas y columnas al mismo tiempo (a diferencia de Flexbox, que se centra en un eje).
Hace que el diseño sea más predecible y limpio.
Tiene propiedades específicas para alinear, distribuir y ordenar los elementos.
Es responsivo y se adapta fácilmente con media queries.
Cómo empezar
Para activar Grid, necesitamos aplicar la propiedad display: grid al contenedor padre que identifiquemos.
.container {
display: grid;
}
A partir de ahí, todo lo que esté dentro del contenedor se convierte en un item de Grid que podemos organizar en filas y columnas.
Definiendo columnas y filas
Para definir columnas usamos grid-template-columns y para definir filas utilizamos grid-template-rows.
Ejemplo
.container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 3 columnas */
grid-template-rows: auto 100px; /* 2 filas */
gap: 20px; /* espacio entre filas y columnas */
}
<div class="container ">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
Con esas reglas, el contenedor tendrá tres columnas (una fija de 200px, otra flexible y otra de 200px) y dos filas.
Unidad fr
La unidad fr (fracción) es exclusiva de Grid y representa una parte del espacio disponible.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
auto-fithace que las columnas se ajusten automáticamente según el ancho de la pantalla.minmax(200px, 1fr)indica que cada columna debe tener un mínimo de 200px, y si sobra espacio, se expande hasta ocupar una fracción disponible.
Esto nos armara un grid responsive sin necesidad de media queries.
Posicionar elementos en la cuadrícula
Podemos hacer que un elemento ocupe varias columnas o filas con:
.item1 {
grid-column: 1 / 3; /* ocupa de la columna 1 a la 3 */
grid-row: 1 / 2; /* ocupa la fila 1 */
}
Alineación en Grid
CSS Grid nos permite alinear de forma sencilla:
.container {
display: grid;
justify-items: center; /* horizontal dentro de cada celda */
align-items: center; /* vertical dentro de cada celda */
}
Y para alinear todo el grid dentro del contenedor:
.container {
justify-content: space-around;
align-content: center;
}
Ejemplo
Layout de pagina con Grid.
<div class="grid-layout">
<header>Encabezado</header>
<nav>Menú</nav>
<main>Contenido principal</main>
<aside>Sidebar</aside>
<footer>Pie de página</footer>
</div>
.grid-layout {
display: grid;
grid-template-areas:
"header header"
"nav main"
"nav aside"
"footer footer";
grid-template-columns: 200px 1fr;
gap: 10px;
}
header { grid-area: header; background: lightblue; }
nav { grid-area: nav; background: lightgreen; }
main { grid-area: main; background: lightcoral; }
aside { grid-area: aside; background: lightgoldenrodyellow; }
footer { grid-area: footer; background: lightgray; }
Con grid-template-areas podemos dibujar el layout con texto, lo que hace que el código sea muy legible.
Conclusión
CSS Grid revolucionó la forma en que construimos interfaces web. Es:
Flexible.
Claro de entender.
Ideal para diseños responsivos.
Si estás empezando, combina Grid para la estructura global de la página y Flexbox para el alineamiento interno de componentes.
Recursos recomendados
Aprende jugando con Grid Garden.
