// Programación I · 07 · Layout
Una retícula en el navegador: filas y columnas a la vez
Una sola dirección: en fila o en columna.
Dos direcciones a la vez: filas y columnas.
.galeria { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
display: grid convierte el contenedor en una retículagrid-template-columns define las columnas: una medida por columnafrfr es una fracción: reparte el espacio disponible en partes.
1fr 1fr 1frtres iguales2fr 1frla primera, el doble200px 1frfija + el restorepeat(4, 1fr)cuatro iguales.destacado { grid-column: span 2; }
Ideal para destacar un proyecto en la galería de un portfolio.
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
Tantas columnas como quepan, cada una de al menos 150px. Sin media queries.
// grid-template-areas
Cada cadena de texto es una fila; cada palabra, una celda. Para cambiar la disposición, basta con cambiar el «dibujo».
// laboratorio
grid-template-columnsgapNo compiten: se complementan. La página con Grid y, dentro de la cabecera, el logo y el menú con Flexbox.
Igual que con Flexbox, Chrome tiene una etiqueta grid que dibuja las líneas de la retícula sobre la página.
// y ahora
Todo esto, con más ejemplos, en los apuntes.