CSS Grid

Two-dimensional layout system.

html

<div class="cg-wrap" role="img" aria-label="CSS Grid: six cells arranged in a two-dimensional grid, first cell optionally spanning two columns">
  <div class="cg-grid" style="grid-template-columns:1fr 1fr 1fr;justify-items:stretch;gap:10px;">
    <div class="cg-cell cg-cell--a" style="grid-column:span 2;">1 span 2</div>
    <div class="cg-cell">2</div>
    <div class="cg-cell">3</div>
    <div class="cg-cell">4</div>
    <div class="cg-cell">5</div>
    <div class="cg-cell">6</div>
  </div>
  <p class="cg-caption">columns: 1fr 1fr 1fr &middot; justify-items: stretch &middot; gap 10px</p>
</div>
<style>
.cg-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.cg-grid { display: grid; }
.cg-cell { background: #A8E6C1; border-radius: 8px; padding: 14px 8px; font-weight: 700; text-align: center; }
.cg-cell--a { background: #F5C2E0; }
.cg-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[320px]" role="img" aria-label="CSS Grid: six cells arranged in a two-dimensional grid, first cell optionally spanning two columns">
  <div class="grid" style="grid-template-columns:1fr 1fr 1fr;justify-items:stretch;gap:10px;">
    <div class="bg-[#F5C2E0] rounded-lg py-3.5 px-2 font-bold text-center" style="grid-column:span 2;">1 span 2</div>
    <div class="bg-[#A8E6C1] rounded-lg py-3.5 px-2 font-bold text-center">2</div>
    <div class="bg-[#A8E6C1] rounded-lg py-3.5 px-2 font-bold text-center">3</div>
    <div class="bg-[#A8E6C1] rounded-lg py-3.5 px-2 font-bold text-center">4</div>
    <div class="bg-[#A8E6C1] rounded-lg py-3.5 px-2 font-bold text-center">5</div>
    <div class="bg-[#A8E6C1] rounded-lg py-3.5 px-2 font-bold text-center">6</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">columns: 1fr 1fr 1fr &middot; justify-items: stretch &middot; gap 10px</p>
</div>

react

export function CssGrid({
  columns = "1fr 1fr 1fr",
  justifyItems = "stretch",
  gap = 10,
  span = true,
}) {
  const cell = { borderRadius: 8, padding: "14px 8px", fontWeight: 700, textAlign: "center" };
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 320 }}
      role="img" aria-label="CSS Grid: six cells arranged in a two-dimensional grid, first cell optionally spanning two columns">
      <div style={{ display: "grid", gridTemplateColumns: columns, justifyItems, gap }}>
        <div style={{ ...cell, background: "#F5C2E0", ...(span ? { gridColumn: "span 2" } : {}) }}>1{span ? " span 2" : ""}</div>
        <div style={{ ...cell, background: "#A8E6C1" }}>2</div>
        <div style={{ ...cell, background: "#A8E6C1" }}>3</div>
        <div style={{ ...cell, background: "#A8E6C1" }}>4</div>
        <div style={{ ...cell, background: "#A8E6C1" }}>5</div>
        <div style={{ ...cell, background: "#A8E6C1" }}>6</div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        columns: {columns} &middot; justify-items: {justifyItems} &middot; gap {gap}px
      </p>
    </div>
  );
}