Utilsha.

CSS Grid Playground

Generá una cuadrícula CSS con columnas, filas y gaps configurables y vista previa inmediata.

1
2
3
4
5
6

CSS generado

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  column-gap: 16px;
  row-gap: 16px;
  align-items: stretch;
  justify-items: stretch;
}

Grid frente a Flexbox

CSS Grid organiza filas y columnas a la vez; Flexbox suele resolver mejor una sola dimensión. Este playground genera una cuadrícula regular sin áreas complejas.

repeat(), fr y gap

repeat(3, 1fr) crea tres columnas iguales. La unidad fr reparte el espacio disponible y gap controla la separación entre celdas.

Explorar herramientas para desarrollo web

Herramientas relacionadas