Dashboard Grid

Layout containing widgets.

html

<div class="dgrid dgrid--cols-3 dgrid--comfortable" style="gap:12px;">
  <section class="dgrid__cell" aria-label="Revenue widget"><h4 class="dgrid__label">Revenue</h4></section>
  <section class="dgrid__cell" aria-label="Signups widget"><h4 class="dgrid__label">Signups</h4></section>
  <section class="dgrid__cell" aria-label="Latency widget"><h4 class="dgrid__label">Latency</h4></section>
  <section class="dgrid__cell" aria-label="Errors widget"><h4 class="dgrid__label">Errors</h4></section>
</div>
<style>
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); font: 13px system-ui, sans-serif; color: #241430; }
.dgrid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.dgrid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.dgrid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.dgrid__cell { background: #FAF7F2; border: 1px solid #24143018; border-radius: 10px; min-height: 64px; padding: 10px; }
.dgrid--compact .dgrid__cell { min-height: 44px; padding: 6px; }
.dgrid--spacious .dgrid__cell { min-height: 96px; padding: 18px; }
.dgrid__label { margin: 0; font-size: 13px; }
@media (max-width: 360px) {
  .dgrid { grid-template-columns: 1fr !important; }
}
</style>

tailwind

<div class="dgrid-tw dgrid-tw--cols-3 dgrid-tw--comfortable grid" style="gap:12px;">
  <section class="bg-[#FAF7F2] border border-[#24143018] rounded-[10px] min-h-16 p-2.5" aria-label="Revenue widget"><h4 class="m-0 text-[13px]">Revenue</h4></section>
  <section class="bg-[#FAF7F2] border border-[#24143018] rounded-[10px] min-h-16 p-2.5" aria-label="Signups widget"><h4 class="m-0 text-[13px]">Signups</h4></section>
  <section class="bg-[#FAF7F2] border border-[#24143018] rounded-[10px] min-h-16 p-2.5" aria-label="Latency widget"><h4 class="m-0 text-[13px]">Latency</h4></section>
  <section class="bg-[#FAF7F2] border border-[#24143018] rounded-[10px] min-h-16 p-2.5" aria-label="Errors widget"><h4 class="m-0 text-[13px]">Errors</h4></section>
</div>
<style>
.dgrid-tw { grid-template-columns: repeat(3, 1fr); }
.dgrid-tw--cols-2 { grid-template-columns: repeat(2, 1fr); }
.dgrid-tw--cols-3 { grid-template-columns: repeat(3, 1fr); }
.dgrid-tw--cols-4 { grid-template-columns: repeat(4, 1fr); }
.dgrid-tw--compact section { min-height: 44px !important; padding: 6px !important; }
.dgrid-tw--spacious section { min-height: 96px !important; padding: 18px !important; }
@media (max-width: 360px) { .dgrid-tw { grid-template-columns: 1fr !important; } }
</style>

react

const WIDGETS = ["Revenue", "Signups", "Latency", "Errors"];

export function DashboardGrid({
  columns = "3",
  density = "comfortable",
  gap = 12,
  showLabels = true,
}) {
  const pad = { compact: 6, comfortable: 10, spacious: 18 }[density] ?? 10;
  const minHeight = { compact: 44, comfortable: 64, spacious: 96 }[density] ?? 64;
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap, font: "13px system-ui, sans-serif", color: "#241430" }}>
      {WIDGETS.map((w) => (
        <section key={w} aria-label={`${w} widget`} style={{ background: "#FAF7F2", border: "1px solid #24143018", borderRadius: 10, minHeight, padding: pad }}>
          {showLabels && <h4 style={{ margin: 0, fontSize: 13 }}>{w}</h4>}
        </section>
      ))}
    </div>
  );
}