CSS Grid Layout: Guía práctica para dominarlo
CSS Grid permite layouts bidimensionales antes imposibles sin hacks: el modelo de grid, las reglas de posicionamiento y los patrones que sustituyen floats.
Antes de CSS Grid, los layouts bidimensionales requerían floats, hacks de posicionamiento o trucos con flexbox. Grid fue diseñado específicamente para esto: defines filas y columnas, colocas los elementos en celdas y dejas que el navegador haga los cálculos. Es el primer sistema de layout de CSS que funciona en ambas dimensiones simultáneamente.
Definiendo un Grid
Un contenedor grid crea un contexto de layout bidimensional. Defines columnas y filas en el contenedor; los hijos se convierten en grid items.
/* ❌ Float-based layout — fragile, requires clearfix hacks */
.container::after {
content: "";
display: table;
clear: both;
}
.sidebar {
float: left;
width: 25%;
}
.main {
float: left;
width: 75%;
}
/* ✅ CSS Grid — explicit, maintainable */
.container {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
gap: 1rem;
min-height: 100vh;
}La unidad 1fr distribuye el espacio disponible de forma proporcional. 250px 1fr significa una barra lateral fija de 250px y un área principal flexible que toma el resto.
Grid Template Areas
Las áreas de grid con nombre hacen que los layouts complejos sean legibles al mapear una representación visual en ASCII con el layout real.
.dashboard {
display: grid;
grid-template-columns: 240px 1fr 1fr;
grid-template-rows: 60px 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"sidebar footer footer";
gap: 1rem;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }<div class="dashboard">
<header class="header">Navigation</header>
<nav class="sidebar">Menu</nav>
<main class="main">Content</main>
<aside class="aside">Details</aside>
<footer class="footer">Status</footer>
</div>Grid responsive con minmax y auto-fit
auto-fit con minmax() crea grids responsive sin media queries. Los elementos se ajustan automáticamente según el espacio disponible.
/* ❌ Fixed column count — breaks on narrow screens */
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
/* ✅ Auto-responsive — cards wrap based on available width */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
/*
auto-fit: create as many columns as fit
minmax(280px, 1fr): each column is at least 280px, at most equal share
Result: 4 columns on wide screen, 2 on tablet, 1 on mobile — no media queries
*/Posicionamiento explícito
Los grid items pueden colocarse en celdas específicas usando números de línea o directivas span.
/* Place items by grid line numbers */
.featured-article {
grid-column: 1 / 3; /* Span from column line 1 to line 3 (2 columns) */
grid-row: 1 / 2; /* First row */
}
/* Span syntax — more readable for common cases */
.wide-card {
grid-column: span 2; /* Span 2 columns from wherever it's placed */
}
.tall-card {
grid-row: span 2; /* Span 2 rows */
}/* Full magazine-style layout */
.magazine-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 200px);
gap: 1rem;
}
.hero-story {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.secondary-story {
grid-column: 3 / 5;
grid-row: 1 / 2;
}
.sidebar-story {
grid-column: 3 / 4;
grid-row: 2 / 4;
}Alineación y centrado
Grid proporciona propiedades de alineación tanto para los grid items dentro de sus celdas como para los tracks del grid dentro del contenedor.
/* Center a single item both horizontally and vertically */
.centered-container {
display: grid;
place-items: center;
min-height: 100vh;
}
/* Align items within their grid cells */
.grid {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-items: center; /* Horizontal alignment of items within cells */
align-items: start; /* Vertical alignment of items within cells */
}
/* Distribute grid tracks within the container */
.grid-centered {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-content: center; /* Center the entire grid horizontally */
align-content: start; /* Align the grid to the top */
gap: 2rem;
}Grid con media queries para layouts complejos
Aunque auto-fit cubre muchos casos responsive, los layouts complejos a veces necesitan cambios explícitos del grid en los breakpoints.
.app-layout {
display: grid;
gap: 1rem;
/* Mobile: single column stack */
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
@media (min-width: 768px) {
.app-layout {
/* Tablet: sidebar becomes a column */
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
}
@media (min-width: 1200px) {
.app-layout {
/* Desktop: three-column layout */
grid-template-columns: 240px 1fr 300px;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
}Puntos clave
- Grid funciona en dos dimensiones — define filas y columnas simultáneamente y coloca los elementos en cualquier parte del grid
- Las áreas con nombre crean layouts legibles — el arte ASCII de
grid-template-areasse corresponde directamente con el resultado visual - auto-fit con minmax() crea grids responsive sin media queries — los elementos se ajustan automáticamente según el ancho del contenedor
- Usa unidades fr para tamaños proporcionales —
1fr 2frda una parte y dos partes del espacio disponible - place-items: center es el centrado más simple — una línea reemplaza al patrón de centrado con flexbox
- Combina auto-fit para grids de tarjetas y áreas explícitas para layouts de aplicación — usa la herramienta adecuada para cada tipo de layout
