Adaptive Layout

Layout switching between predefined configurations.

html

<div class="rsp-ad-viewport">
  <p class="rsp-ad-guide">Jumps between 3 fixed configs: 1-col below 260px, 2-col below 460px, 3-col above</p>
  <div class="rsp-ad-container" style="width:280px;">
    <div class="rsp-ad-grid" style="gap:8px;">
      <span style="background:#D9C8F0;"></span><span style="background:#D9C8F0;"></span><span style="background:#D9C8F0;"></span>
    </div>
  </div>
</div>
<style>
.rsp-ad-viewport { width: 100%; max-width: 660px; }
.rsp-ad-guide { font: 11px system-ui, sans-serif; color: #241430aa; margin: 0 0 8px; }
.rsp-ad-container { container-type: inline-size; max-width: 100%; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; padding: 14px; box-sizing: border-box; }
.rsp-ad-grid { display: grid; grid-template-columns: 1fr; }
.rsp-ad-grid span { height: 46px; border-radius: 8px; }
@container (min-width: 260px) { .rsp-ad-grid { grid-template-columns: 1fr 1fr; } }
@container (min-width: 460px) { .rsp-ad-grid { grid-template-columns: 1fr 1fr 1fr; } }
</style>

tailwind

<div class="w-full max-w-[660px]">
  <p class="text-[11px] text-[#241430]/70 m-0 mb-2">Jumps between 3 fixed configs: 1-col below 260px, 2-col below 460px, 3-col above</p>
  <div class="tw-ad-container max-w-full bg-[#FAF7F2] border border-[#24143022] rounded-xl p-3.5 box-border" style="width:280px; container-type:inline-size;">
    <div class="tw-ad-grid grid grid-cols-1" style="gap:8px;">
      <span class="h-[46px] rounded-lg" style="background:#D9C8F0;"></span><span class="h-[46px] rounded-lg" style="background:#D9C8F0;"></span><span class="h-[46px] rounded-lg" style="background:#D9C8F0;"></span>
    </div>
  </div>
</div>
<style>
@container (min-width: 260px) { .tw-ad-grid { grid-template-columns: 1fr 1fr; } }
@container (min-width: 460px) { .tw-ad-grid { grid-template-columns: 1fr 1fr 1fr; } }
</style>

react

export function AdaptiveLayout({
  width = 280,
  showGuide = true,
  gap = 8,
  accent = "#D9C8F0",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 660 }}>
      {showGuide && <p style={{ fontSize: 11, color: "#241430aa", margin: "0 0 8px" }}>Jumps between 3 fixed configs: 1-col below 260px, 2-col below 460px, 3-col above</p>}
      <div style={{ width, maxWidth: "100%", containerType: "inline-size", background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, padding: 14, boxSizing: "border-box" }}>
        <div className="grid" style={{ display: "grid", gridTemplateColumns: "1fr", gap }}>
          <span style={{ height: 46, borderRadius: 8, background: accent }} />
          <span style={{ height: 46, borderRadius: 8, background: accent }} />
          <span style={{ height: 46, borderRadius: 8, background: accent }} />
        </div>
      </div>
      <style>{`
        @container (min-width: 260px) { .grid { grid-template-columns: 1fr 1fr; } }
        @container (min-width: 460px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }
      `}</style>
    </div>
  );
}