BaselineLab
0

CSS Grid playground

Design complete two-dimensional grids: define rows and columns, create areas, span cells, control each item placement, and copy the result.

Ask AI

CSS Grid playground

Response generated with openai/gpt-5.4-nano. AI can make mistakes. Always review the result.
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
Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.
<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;
}