Una cuadrícula como la de las baldosas
Mira las baldosas del suelo del instituto. Están en filas y en columnas, todas del mismo tamaño.
Flexbox coloca cajas en una sola dirección. Para filas y columnas a la vez hay otra herramienta.
Se llama grid, que en inglés significa cuadrícula. Hoy la usas para el menú de un bar.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Grid | Una cuadrícula de filas y columnas para colocar cajas. | display: grid; |
| Columna | Una línea de huecos de arriba abajo. | |
| Fila | Una línea de huecos de izquierda a derecha. | |
| fr | Una parte del sitio libre. Dos columnas de 1fr miden lo mismo. | 1fr |
| Celda | Un hueco de la cuadrícula, donde cruzan una fila y una columna. |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Dibujar las columnas
Pon display: grid; en el contenedor. Después di cuántas columnas quieres con grid-template-columns.
La regla repeat(3, 1fr) significa tres columnas iguales. Las filas se crean solas, según haya cajas.
Pruébalo: seis platos en tres columnas
<div class="menu">
<div class="dish">Lentejas</div>
<div class="dish">Paella</div>
<div class="dish">Tortilla</div>
<div class="dish">Ensalada</div>
<div class="dish">Flan</div>
<div class="dish">Fruta</div>
</div>
Qué es fr
La unidad fr reparte lo que queda libre. Si escribes 2fr 1fr, hay tres partes: dos para la primera columna y una para la segunda.
Con gap dejas un hueco entre celdas. Ese hueco se resta antes de repartir.
Ejemplo resuelto: cuánto mide cada columna
| Regla | Ancho del contenedor | Gap | Columnas |
|---|---|---|---|
| repeat(3, 1fr) | 600 px | 0 | 200, 200 y 200 px |
| repeat(3, 1fr) | 640 px | 20 px | 200, 200 y 200 px |
| repeat(2, 1fr) | 640 px | 20 px | 310 y 310 px |
| 2fr 1fr | 600 px | 0 | 400 y 200 px |
| 1fr 2fr 1fr | 800 px | 0 | 200, 400 y 200 px |
| 100px 1fr | 500 px | 0 | 100 y 400 px |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
La cuenta con gap
Consejo
Con tres columnas hay dos huecos. En 640 px con gap de 20 px quedan 600 px libres.
Esos 600 px entre tres columnas son 200 px cada una.
Repaso rápido: el reparto
Inténtalo
Repaso rápido: el reparto
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Una caja que ocupa varias celdas
A veces una caja debe ser más ancha que las demás.
Con grid-column: span 2; ocupa dos columnas. Con grid-column: 1 / -1; ocupa todas, de la primera a la última.
Así se hace una cabecera que cruza toda la página.