Grid Item

Child within CSS Grid.

html

<div class="gi-wrap" role="img" aria-label="A 3 by 2 grid; the highlighted target cell's column span, row span, justify-self and align-self are adjustable">
  <div class="gi-grid">
    <div class="gi-cell gi-cell--target" style="grid-column:span 2;grid-row:span 1;justify-self:stretch;align-self:stretch;">target</div>
    <div class="gi-cell">b</div>
    <div class="gi-cell">c</div>
    <div class="gi-cell">d</div>
    <div class="gi-cell">e</div>
  </div>
  <p class="gi-caption">span 2&times;1 &middot; justify-self: stretch &middot; align-self: stretch</p>
</div>
<style>
.gi-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.gi-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 56px; gap: 8px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; }
.gi-cell { background: #A8E6C1; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.gi-cell--target { background: #F5C2E0; font-weight: 700; }
.gi-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 3 by 2 grid; the highlighted target cell's column span, row span, justify-self and align-self are adjustable">
  <div class="grid grid-cols-3 auto-rows-[56px] gap-2 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border">
    <div class="bg-[#F5C2E0] rounded-md flex items-center justify-center font-bold" style="grid-column:span 2;grid-row:span 1;justify-self:stretch;align-self:stretch;">target</div>
    <div class="bg-[#A8E6C1] rounded-md flex items-center justify-center font-semibold">b</div>
    <div class="bg-[#A8E6C1] rounded-md flex items-center justify-center font-semibold">c</div>
    <div class="bg-[#A8E6C1] rounded-md flex items-center justify-center font-semibold">d</div>
    <div class="bg-[#A8E6C1] rounded-md flex items-center justify-center font-semibold">e</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">span 2&times;1 &middot; justify-self: stretch &middot; align-self: stretch</p>
</div>

react

export function GridItem({
  colSpan = 2,
  rowSpan = 1,
  justifySelf = "stretch",
  alignSelf = "stretch",
}) {
  const cell = { background: "#A8E6C1", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600 };
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 320 }}
      role="img" aria-label="A 3 by 2 grid; the highlighted target cell's column span, row span, justify-self and align-self are adjustable">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gridAutoRows: 56, gap: 8,
        background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 10, boxSizing: "border-box" }}>
        <div style={{ ...cell, background: "#F5C2E0", fontWeight: 700, gridColumn: `span ${colSpan}`, gridRow: `span ${rowSpan}`, justifySelf, alignSelf }}>target</div>
        <div style={cell}>b</div><div style={cell}>c</div><div style={cell}>d</div><div style={cell}>e</div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        span {colSpan}&times;{rowSpan} &middot; justify-self: {justifySelf} &middot; align-self: {alignSelf}
      </p>
    </div>
  );
}