Intermedio⏱ 40 min
🎨
CSS · Capítulo 8
CSS Grid
Crea layouts bidimensionales complejos con CSS Grid: columnas, filas, áreas y la unidad fr.
📖
Teoría
CSS Grid es el sistema de layout bidimensional. Mientras Flexbox trabaja en una dimensión (fila O columna), Grid trabaja en dos simultáneamente.
Propiedades clave:
display: grid
grid-template-columns: define las columnas
grid-template-rows: define las filas
gap: espacio entre celdas
grid-column/row: cuántas celdas ocupa un elemento
fr: unidad fraccionaria (divide el espacio disponible)
css
/* 3 columnas iguales */
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
/* Shorthand: repeat() */
.grid { grid-template-columns: repeat(3, 1fr); }
/* Columnas de diferente tamaño */
.layout {
display: grid;
grid-template-columns: 280px 1fr; /* sidebar + contenido */
grid-template-rows: auto 1fr auto; /* header + main + footer */
min-height: 100vh;
}
/* Elemento que ocupa múltiples columnas */
.hero {
grid-column: 1 / -1; /* de la primera a la última columna */
}
.sidebar { grid-row: 1 / 3; } /* ocupa 2 filas */
/* Grid responsivo sin media queries */
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}⚡
Ejercicio práctico
🎯 Tu misión
Recrea el layout de una revista con CSS Grid: un artículo destacado que ocupe 2 columnas en la parte superior, y 3 artículos secundarios en la fila de abajo.
Vista previa