Grid

Two-dimensional layout system.

html

<div class="grid-demo grid-demo--count-6" style="grid-template-columns:repeat(3, 1fr);gap:8px;">
  <div class="grid-demo__cell" style="background:#BFD9F2;">1</div>
  <div class="grid-demo__cell" style="background:#BFD9F2;">2</div>
  <div class="grid-demo__cell" style="background:#BFD9F2;">3</div>
  <div class="grid-demo__cell" style="background:#BFD9F2;">4</div>
  <div class="grid-demo__cell" style="background:#BFD9F2;">5</div>
  <div class="grid-demo__cell" style="background:#BFD9F2;">6</div>
  <div class="grid-demo__cell grid-demo__cell--extra" style="background:#BFD9F2;">7</div>
  <div class="grid-demo__cell grid-demo__cell--extra" style="background:#BFD9F2;">8</div>
  <div class="grid-demo__cell grid-demo__cell--extra" style="background:#BFD9F2;">9</div>
</div>
<style>
.grid-demo { display: grid; font: 600 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; }
.grid-demo__cell { aspect-ratio: 1.4; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.grid-demo__cell--extra { display: none; }
.grid-demo--count-9 .grid-demo__cell--extra { display: flex; }
</style>

tailwind

<div class="grid font-sans font-semibold text-sm text-[#241430] bg-[#FAF7F2] p-4 grid-tw grid-tw--count-6" style="grid-template-columns:repeat(3, 1fr);gap:8px;">
  <div class="aspect-[1.4] rounded-md flex items-center justify-center" style="background:#BFD9F2;">1</div>
  <div class="aspect-[1.4] rounded-md flex items-center justify-center" style="background:#BFD9F2;">2</div>
  <div class="aspect-[1.4] rounded-md flex items-center justify-center" style="background:#BFD9F2;">3</div>
  <div class="aspect-[1.4] rounded-md flex items-center justify-center" style="background:#BFD9F2;">4</div>
  <div class="aspect-[1.4] rounded-md flex items-center justify-center" style="background:#BFD9F2;">5</div>
  <div class="aspect-[1.4] rounded-md flex items-center justify-center" style="background:#BFD9F2;">6</div>
  <div class="aspect-[1.4] rounded-md items-center justify-center grid-tw__extra" style="background:#BFD9F2;">7</div>
  <div class="aspect-[1.4] rounded-md items-center justify-center grid-tw__extra" style="background:#BFD9F2;">8</div>
  <div class="aspect-[1.4] rounded-md items-center justify-center grid-tw__extra" style="background:#BFD9F2;">9</div>
</div>
<style>
.grid-tw__extra { display: none; }
.grid-tw--count-9 .grid-tw__extra { display: flex; }
</style>

react

export function Grid({
  columns = 3,
  gap = 8,
  accent = "#BFD9F2",
  count = "6",
  numbers = true,
}) {
  const total = Number(count);
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap, fontFamily: "system-ui, sans-serif", fontWeight: 600, fontSize: 14, color: "#241430", background: "#FAF7F2", padding: 16 }}>
      {Array.from({ length: total }, (_, i) => (
        <div key={i} style={{ background: accent, aspectRatio: 1.4, borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center" }}>
          {numbers ? i + 1 : ""}
        </div>
      ))}
    </div>
  );
}