CSS
Fundamentos de CSS Grid para crear layouts bidimensionales mediante tracks, líneas, celdas, áreas, fracciones y colocación automática.
CSS Grid crea un sistema bidimensional de filas y columnas para colocar items directos.
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}<section class="gallery">
<article>...</article>
<article>...</article>
</section>Los hijos directos son grid items. Sus descendientes no participan en la grid exterior salvo que también crees otra grid o utilices subgrid.
grid-template-columns: 12rem 1fr 1fr;Crea tres column tracks y cuatro column lines.
Los items se colocan entre líneas, no “dentro de columnas” como entidades aisladas.
grid-template-rows: auto 1fr auto;Rows y columns pueden tener sizing diferente.
grid-template-columns: 1fr 2fr;Distribuye espacio flexible restante después de considerar gaps, tracks fijos y restricciones intrínsecas.
No equivale exactamente a 33% y 66%.
grid-template-columns: repeat(4, 1fr);Reduce repetición.
grid-template-columns: 12rem repeat(3, 1fr);.grid {
column-gap: 2rem;
row-gap: 1rem;
}gap no crea tracks adicionales y no necesita margins en cada item.
.grid {
grid-template-columns: repeat(2, 1fr);
}Si aparecen más items, el algoritmo crea rows implícitas.
.grid {
grid-auto-rows: minmax(8rem, auto);
}Controla tracks implícitos.
Por defecto los items se colocan en DOM order, avanzando por filas.
.grid {
grid-auto-flow: column;
}Cambia dirección de colocación automática.
.grid {
grid-auto-flow: dense;
}Puede rellenar huecos con items posteriores y cambiar el orden visual. Úsalo solo cuando el orden no comunique secuencia.
grid-template-columns: auto 1fr;auto responde a contenido y espacio disponible según el algoritmo.
.grid-item {
min-inline-size: 0;
}Grid items pueden conservar min-content size y causar overflow.
Usa Grid cuando:
Usa Flexbox cuando:
Pueden combinarse.
.dashboard {
display: grid;
grid-template-columns: 16rem minmax(0, 1fr);
min-block-size: 100dvh;
}
.dashboard__main {
min-inline-size: 0;
}¿Por qué 1fr 1fr puede producir overflow con contenido largo?
Porque los tracks flexibles respetan min-content contributions; puede necesitarse minmax(0, 1fr) o permitir wrapping en el item.
Grid placement y áreas controla dónde comienza y termina cada item.