grid-template: fr, repeat() y minmax()

Definir tracks es el 50% de Grid, y tres herramientas lo hacen expresivo: la unidad fr (fracciones del espacio), repeat() (no escribir 12 veces lo mismo) y minmax() (tracks elásticos con límites). Al final de esta lección lees y escribes cualquier grid-template-columns de producción.

fr: la fracción del espacio libre

fr reparte el espacio SOBRANTE después de descontar lo fijo — la prima de flex-grow, pero para tracks:

<div class="g uno"><div class="c">250px</div><div class="c">1fr</div></div>
<div class="g dos"><div class="c">1fr</div><div class="c">2fr</div><div class="c">1fr</div></div>

body { font-family: system-ui; padding: 20px; }
.g { display: grid; gap: 8px; margin-bottom: 12px; }
.uno { grid-template-columns: 250px 1fr; }
.dos { grid-template-columns: 1fr 2fr 1fr; }
.c { background: #6d28d9; color: white; border-radius: 8px; padding: 16px; font-weight: 600; text-align: center; font-size: 14px; }

repeat(): el atajo honesto

Y las filas funcionan idéntico con grid-template-rows. Un matiz que sorprende: normalmente NO defines las filas — Grid las crea solas a medida que el contenido llega (filas implícitas, de altura auto). Defines columnas casi siempre, filas solo cuando el diseño las exige (dashboards a pantalla completa, el proyecto de este módulo).

minmax(): el track con límites

La joya de la corona. minmax(min, max) crea un track elástico acotado:

<div class="form">
<label for="n">Nombre</label><input id="n">
<label for="e">Correo electrónico</label><input id="e">
<label for="m">Mensaje</label><input id="m">
</div>

body { font-family: system-ui; padding: 20px; }
.form { display: grid; grid-template-columns: max-content 1fr; gap: 10px 14px; align-items: center; max-width: 420px; }
label { font-size: 14px; font-weight: 600; color: #1e293b; }
input { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; min-width: 0; }

Mira la columna de labels: mide exactamente lo que pide "Correo electrónico" (el más largo) y TODOS los inputs arrancan alineados. Ese es el formulario del quiz de la lección pasada, resuelto en una línea.

Mini-reto

Reconstruye el formulario de registro de tu periódico (módulo 2) con max-content 1fr. Luego crea el patrón "prosa centrada" (1fr minmax(auto, 65ch) 1fr) y ponle un artículo dentro: acabas de maquetar como los blogs profesionales.

Qué sigue

Tracks dominados. La próxima lección es la forma más expresiva de colocar contenido en CSS: grid-template-areas — layouts que se leen como dibujos ASCII.