Responsive Layout

Layout adapting to available space.

html

<div class="rsp-rl-viewport" data-items="three">
  <div class="rsp-rl-container" style="width:300px;">
    <div class="rsp-rl-row" style="gap:10px;">
      <span style="background:#A8E6C1;"></span><span style="background:#A8E6C1;"></span><span class="rsp-rl-third" style="background:#A8E6C1;"></span>
    </div>
  </div>
  <p class="rsp-rl-caption">300px &mdash; wraps to fit the available space, no fixed breakpoint list</p>
</div>
<style>
.rsp-rl-viewport { width: 100%; max-width: 660px; }
.rsp-rl-container { container-type: inline-size; max-width: 100%; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; padding: 14px; box-sizing: border-box; }
.rsp-rl-row { display: flex; flex-wrap: wrap; }
.rsp-rl-row span { flex: 1 1 120px; height: 46px; border-radius: 8px; }
.rsp-rl-third { display: none; }
[data-items="three"] .rsp-rl-third { display: block; }
.rsp-rl-caption { margin: 8px 0 0; font: 11px system-ui, sans-serif; color: #241430aa; }
</style>

tailwind

<div class="w-full max-w-[660px]" data-items="three">
  <div class="tw-rl-container max-w-full bg-[#FAF7F2] border border-[#24143022] rounded-xl p-3.5 box-border" style="width:300px; container-type:inline-size;">
    <div class="flex flex-wrap" style="gap:10px;">
      <span class="flex-[1_1_120px] h-[46px] rounded-lg" style="background:#A8E6C1;"></span><span class="flex-[1_1_120px] h-[46px] rounded-lg" style="background:#A8E6C1;"></span><span class="tw-rl-third flex-[1_1_120px] h-[46px] rounded-lg hidden" style="background:#A8E6C1;"></span>
    </div>
  </div>
  <p class="mt-2 text-[11px] text-[#241430]/70">300px &mdash; wraps to fit the available space, no fixed breakpoint list</p>
</div>
<style>
[data-items="three"] .tw-rl-third { display: block; }
</style>

react

export function ResponsiveLayout({
  width = 300,
  gap = 10,
  itemCount = "three",
  accent = "#A8E6C1",
}) {
  const box = { flex: "1 1 120px", height: 46, borderRadius: 8, background: accent };
  return (
    <div style={{ width: "100%", maxWidth: 660 }}>
      <div style={{ width, maxWidth: "100%", containerType: "inline-size", background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, padding: 14, boxSizing: "border-box" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap }}>
          <span style={box} /><span style={box} />{itemCount === "three" && <span style={box} />}
        </div>
      </div>
      <p style={{ margin: "8px 0 0", fontSize: 11, color: "#241430aa" }}>{width}px &mdash; wraps to fit the available space, no fixed breakpoint list</p>
    </div>
  );
}