BaselineLab
0Apoyar

Playground de CSS Grid

Diseña cuadrículas bidimensionales completas: define filas y columnas, crea áreas, expande celdas, controla la colocación de cada ítem y copia el resultado.

Leer la guía

Preguntar a la IA

Playground de CSS Grid

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.
Preview
repeat(3, minmax(0, 1fr))repeat(2, minmax(6rem, auto))
3 × 2
HTML
<div class="grid-layout">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>
Tailwind CSS
Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.
<div class="grid bg-orange-100 [min-block-size:24rem] [grid-template-columns:repeat(3,_minmax(0,_1fr))] [grid-template-rows:repeat(2,_minmax(6rem,_auto))] gap-[16px]">
  <div class="min-w-14 min-h-14 bg-blue-600 p-4 text-white">1</div>
  <div class="min-w-14 min-h-14 bg-blue-600 p-4 text-white">2</div>
  <div class="min-w-14 min-h-14 bg-blue-600 p-4 text-white">3</div>
  <div class="min-w-14 min-h-14 bg-blue-600 p-4 text-white">4</div>
  <div class="min-w-14 min-h-14 bg-blue-600 p-4 text-white">5</div>
  <div class="min-w-14 min-h-14 bg-blue-600 p-4 text-white">6</div>
</div>
CSS
.grid-layout {
  display: grid;
  background-color: #ffedd5;
  min-block-size: 24rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(6rem, auto));
  gap: 16px;
}

.grid-layout > * {
  min-inline-size: 3.5rem;
  min-block-size: 3.5rem;
  padding: 1rem;
  background-color: #2563eb;
  color: #ffffff;
}

Guía educativa de CSS Grid

Entiende CSS Grid

Aprende a pensar en filas, columnas, tracks y líneas. Consulta la sintaxis y prueba los valores de alineación en una preview conectada.

Volver al playground

Modelo mental

Grid organiza el espacio en dos dimensiones. El contenedor define tracks y líneas; cada hijo se coloca en una celda o atraviesa varias.

Tracks delimitados por líneasCada franja entre dos líneas es un track. La intersección de una fila y una columna forma una celda.

La cuadrícula explícita crea la estructura

grid-template-columns y grid-template-rows describen los tracks previstos. Las áreas pueden darles nombres semánticos.

Los ítems ocupan celdas o regiones

El auto-placement busca la siguiente celda libre. Las líneas, spans y áreas permiten que un ítem ocupe una región concreta.

Propiedades del contenedor

Estas propiedades crean la cuadrícula, definen sus tracks y controlan el flujo, la alineación y el espacio.

display

Activa el formato Grid para los hijos directos.

Sintaxis
display: grid | inline-grid;
Valor inicial de CSS
inline
Valores
gridinline-grid

grid participa como bloque en el flujo exterior; inline-grid se comporta como un elemento en línea.

Consultar documentaciónAbre en una pestaña nueva

grid-template-columns

Define el número y el tamaño de los tracks de columna.

Sintaxis
grid-template-columns: <track-list> | none;
Valor inicial de CSS
none
Valores
repeat()minmax()<track-list>

minmax(0, 1fr) permite que el track flexible encoja por debajo del tamaño mínimo automático del contenido.

Consultar documentaciónAbre en una pestaña nueva

grid-template-rows

Define el número y el tamaño de los tracks de fila.

Sintaxis
grid-template-rows: <track-list> | none;
Valor inicial de CSS
none
Valores
repeat()minmax()<track-list>

Las filas auto se adaptan al contenido; fr reparte el espacio libre cuando el contenedor tiene un tamaño definido.

Consultar documentaciónAbre en una pestaña nueva

grid-template-areas

Describe regiones nombradas mediante una representación visual de la cuadrícula.

Sintaxis
grid-template-areas: <string>+ | none;
Valor inicial de CSS
none
Valores
<string>

Cada área nombrada debe formar un rectángulo continuo y cada string representa una fila.

Consultar documentaciónAbre en una pestaña nueva

grid-auto-flow

Elige el eje y la estrategia del auto-placement.

Sintaxis
grid-auto-flow: row | column | dense;
Valor inicial de CSS
row
Valores
rowcolumnrow densecolumn dense

dense puede rellenar huecos anteriores y cambiar el orden visual, pero no el orden del DOM.

Consultar documentaciónAbre en una pestaña nueva

justify-items

Alinea los ítems dentro de sus celdas en el eje inline.

Sintaxis
justify-items: normal | stretch | start | center | end;
Valor inicial de CSS
legacy
Valores
stretchstartcenterend

stretch solo estira un ítem si su tamaño inline es automático.

Consultar documentaciónAbre en una pestaña nueva

align-items

Alinea los ítems dentro de sus celdas en el eje de bloque.

Sintaxis
align-items: normal | stretch | start | center | end;
Valor inicial de CSS
normal
Valores
stretchstartcenterend

Un ítem puede sobrescribir este valor mediante align-self.

Consultar documentaciónAbre en una pestaña nueva

justify-content

Distribuye la cuadrícula completa sobre el eje inline.

Sintaxis
justify-content: normal | stretch | start | center | end | <content-distribution>;
Valor inicial de CSS
normal
Valores
stretchstartcenterendspace-betweenspace-aroundspace-evenly

Solo se aprecia cuando la suma de los tracks es menor que el contenedor y queda espacio libre.

Consultar documentaciónAbre en una pestaña nueva

align-content

Distribuye la cuadrícula completa sobre el eje de bloque.

Sintaxis
align-content: normal | stretch | start | center | end | <content-distribution>;
Valor inicial de CSS
normal
Valores
stretchstartcenterendspace-betweenspace-aroundspace-evenly

Necesita un tamaño de contenedor definido y espacio libre fuera de los tracks.

Consultar documentaciónAbre en una pestaña nueva

gap

Añade separación entre filas y columnas sin márgenes en los hijos.

Sintaxis
gap: <row-gap> <column-gap>?;
Valor inicial de CSS
normal
Valores
<length><percentage>

Con dos valores, el primero corresponde a row-gap y el segundo a column-gap.

Consultar documentaciónAbre en una pestaña nueva

Propiedades de los ítems

Cada hijo puede colocarse mediante líneas, spans o áreas y sobrescribir su alineación dentro de la celda.

grid-column: 1 / span 2;
Las líneas delimitan una región

grid-column y grid-row son shorthands de inicio y fin. span expresa cuántos tracks debe atravesar el ítem.

grid-column

Coloca o expande un ítem entre líneas de columna.

Sintaxis
grid-column: <grid-line> / <grid-line>;
Valor inicial de CSS
auto
Valores
auto1 / span 22 / -1

Los índices empiezan en 1; los negativos cuentan desde el final de la cuadrícula explícita.

Consultar documentaciónAbre en una pestaña nueva

grid-row

Coloca o expande un ítem entre líneas de fila.

Sintaxis
grid-row: <grid-line> / <grid-line>;
Valor inicial de CSS
auto
Valores
auto1 / span 22 / span 2

Usar span evita calcular manualmente la línea final cuando importa el número de tracks.

Consultar documentaciónAbre en una pestaña nueva

grid-area

Coloca un ítem en un área nombrada o combina sus cuatro líneas.

Sintaxis
grid-area: <custom-ident> | <grid-line> / <grid-line> / <grid-line> / <grid-line>;
Valor inicial de CSS
auto
Valores
auto<custom-ident><grid-line>

El shorthand sigue el orden row-start / column-start / row-end / column-end.

Consultar documentaciónAbre en una pestaña nueva

justify-self

Sobrescribe justify-items para un único ítem.

Sintaxis
justify-self: auto | stretch | start | center | end;
Valor inicial de CSS
auto
Valores
autostretchstartcenterend

auto hereda la alineación del contenedor; los demás valores crean una excepción.

Consultar documentaciónAbre en una pestaña nueva

align-self

Sobrescribe align-items para un único ítem.

Sintaxis
align-self: auto | stretch | start | center | end;
Valor inicial de CSS
auto
Valores
autostretchstartcenterend

La alineación cambia el ítem dentro de su área, no la posición de la propia celda.

Consultar documentaciónAbre en una pestaña nueva

Errores frecuentes

Cuando el resultado sorprende, suele haber tracks implícitos, mínimos automáticos, reordenación visual o un área inválida.

Aparecen filas o columnas no declaradas

Resultado esperado
Que el layout use únicamente las filas y columnas declaradas de forma explícita.
Causa
Un ítem queda fuera de la cuadrícula explícita y Grid crea tracks implícitos para alojarlo.
Solución
Revisa las líneas de colocación y define grid-auto-rows o grid-auto-columns si esos tracks son intencionados.

Una columna 1fr provoca overflow

Resultado esperado
Que la columna flexible se mantenga dentro del contenedor disponible.
Causa
El mínimo automático del track protege contenido que no puede encoger.
Solución
Usa minmax(0, 1fr) y permite que el contenido se ajuste o desborde de forma deliberada.

dense altera el orden visual

Resultado esperado
Que el orden visual de los ítems siga el mismo orden que el DOM.
Causa
El algoritmo vuelve a huecos anteriores para colocar elementos posteriores.
Solución
No uses dense cuando el orden visual comunique una secuencia; el DOM y la navegación conservan su orden original.

grid-template-areas se invalida por completo

Resultado esperado
Que las áreas nombradas formen una plantilla válida y se representen en la cuadrícula.
Causa
Una fila tiene otra cantidad de celdas o un nombre no forma un rectángulo.
Solución
Mantén el mismo número de tokens por fila y comprueba que cada nombre dibuje una región rectangular continua.

Comparativas

Grid, Flexbox y Grid Lanes resuelven relaciones espaciales distintas. Elegir el modelo adecuado hace que el CSS exprese mejor la estructura.

display: grid;frente adisplay: flex;

Cuadrícula bidimensional o flujo flexible

Grid coordina filas y columnas de forma explícita. Flexbox distribuye contenido principalmente en un eje y deja que los ítems negocien el espacio.

Probar esta estructura en el lab de Flexbox
display: grid;frente adisplay: grid-lanes;

Cuadrícula alineada o flujo por lanes

Grid alinea los ítems en filas y columnas compartidas. Grid Lanes conserva las columnas, pero coloca cada ítem en el hueco disponible para crear composiciones tipo masonry.

Probar esta estructura en el lab de Grid Lanes