Grid Container

Parent using CSS Grid.

html

<div class="gc-wrap" role="img" aria-label="A grid container parenting six cells; column tracks, row height, gap and align-items are adjustable">
  <div class="gc-grid" style="grid-template-columns:repeat(3, 1fr);grid-auto-rows:56px;gap:10px;align-items:stretch;">
    <div class="gc-cell">1</div>
    <div class="gc-cell">2</div>
    <div class="gc-cell">3</div>
    <div class="gc-cell">4</div>
    <div class="gc-cell">5</div>
    <div class="gc-cell">6</div>
  </div>
  <p class="gc-caption">columns: repeat(3, 1fr) &middot; row height 56px &middot; gap 10px &middot; align-items: stretch</p>
</div>
<style>
.gc-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.gc-grid { display: grid; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; }
.gc-cell { background: #D9C8F0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; height: 30px; }
.gc-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[320px]" role="img" aria-label="A grid container parenting six cells; column tracks, row height, gap and align-items are adjustable">
  <div class="grid bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border" style="grid-template-columns:repeat(3, 1fr);grid-auto-rows:56px;gap:10px;align-items:stretch;">
    <div class="bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]">1</div>
    <div class="bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]">2</div>
    <div class="bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]">3</div>
    <div class="bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]">4</div>
    <div class="bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]">5</div>
    <div class="bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]">6</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">columns: repeat(3, 1fr) &middot; row height 56px &middot; gap 10px &middot; align-items: stretch</p>
</div>

react

export function GridContainer({
  columns = "repeat(3, 1fr)",
  rows = "56px",
  gap = 10,
  alignItems = "stretch",
}) {
  const cell = { background: "#D9C8F0", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, height: 30 };
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 320 }}
      role="img" aria-label="A grid container parenting six cells; column tracks, row height, gap and align-items are adjustable">
      <div style={{ display: "grid", gridTemplateColumns: columns, gridAutoRows: rows, gap, alignItems,
        background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 10, boxSizing: "border-box" }}>
        <div style={cell}>1</div><div style={cell}>2</div><div style={cell}>3</div>
        <div style={cell}>4</div><div style={cell}>5</div><div style={cell}>6</div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        columns: {columns} &middot; row height {rows} &middot; gap {gap}px &middot; align-items: {alignItems}
      </p>
    </div>
  );
}