Domina CSS Grid Layout para crear estructuras bidimensionales complejas con precisión. Esta guía completa te llevará desde los fundamentos hasta técnicas avanzadas con ejemplos prácticos de layouts profesionales.
Diagrama de un layout complejo creado con CSS Grid
Contenido del Artículo
Fundamentos de Grid Layout
Conceptos clave para entender CSS Grid:
Contenedor Grid
display: grid o display: inline-grid
Grid Items
Elementos hijos directos del contenedor
Grid Lines
Líneas divisorias horizontales/verticales
Grid Tracks
Espacio entre dos líneas adyacentes (filas/columnas)
Grid Cell
Espacio entre 4 líneas (unidad mínima)
Grid Area
Espacio rectangular definido por líneas
/* Configuración básica */
.grid-contenedor {
display: grid;
grid-template-columns: 200px 1fr 200px; /* Columnas */
grid-template-rows: 100px auto 150px; /* Filas */
gap: 20px; /* Espacio entre celdas */
grid-template-areas: /* Nombrado visual */
"header header header"
"sidebar main aside"
"footer footer footer";
}
Creando un Layout Completo
Implementación de un layout magazine con Grid:
.magazine-layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(150px, auto);
gap: 20px;
}
.header {
grid-column: 1 / -1; /* Ocupa todas las columnas */
grid-row: 1;
}
.featured {
grid-column: 1 / 8;
grid-row: 2 / 4;
}
.secondary {
grid-column: 8 / 13;
grid-row: 2;
}
.tertiary {
grid-column: 8 / 13;
grid-row: 3;
}
.sidebar {
grid-column: 1 / 4;
grid-row: 4 / 6;
}
.main-content {
grid-column: 4 / 13;
grid-row: 4 / 6;
}
.footer {
grid-column: 1 / -1;
grid-row: 6;
}
Técnicas Avanzadas
Patrones profesionales para layouts complejos:
Grid Implícita
grid-auto-rows y grid-auto-columns
Alineación Avanzada
justify/align-content para el grid completo
Grid Denso
grid-auto-flow: dense para evitar espacios
Overlap Controlado
Posicionamiento con z-index en áreas superpuestas
/* Grid con áreas implícitas y flujo denso */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-flow: dense;
gap: 15px;
}
.gallery-item:nth-child(3n) {
grid-column: span 2;
}
/* Superposición artística */
.hero {
grid-column: 1 / -1;
grid-row: 1;
z-index: 1;
}
.hero-title {
grid-column: 2 / 5;
grid-row: 1;
align-self: end;
z-index: 2;
}Usa minmax() y auto-fill para grids completamente responsivos sin media queries
