BaselineLab
0

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.

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.
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;
}