Mobile-first

Designing from small screens upward.

html

<div class="rsp-mf-stage">
  <p class="rsp-mf-label">Product grid</p>
  <div class="rsp-mf-grid" style="--cols:3;">
    <span style="background:#A8E6C1;"></span><span style="background:#A8E6C1;"></span><span style="background:#A8E6C1;"></span>
  </div>
  <p class="rsp-mf-code">base: grid-template-columns: 1fr; (starts single-column, big touch targets)</p>
</div>
<style>
.rsp-mf-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430; }
.rsp-mf-label { margin: 0 0 8px; font-weight: 600; }
.rsp-mf-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.rsp-mf-grid span { height: 44px; border-radius: 8px; }
.rsp-mf-grid--wide { grid-template-columns: repeat(var(--cols), 1fr); }
.rsp-mf-code { margin: 10px 0 0; font-family: ui-monospace, monospace; font-size: 10px; color: #241430aa; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]">
  <p class="m-0 mb-2 font-semibold">Product grid</p>
  <div class="tw-mf-grid grid grid-cols-1 gap-2" style="--cols:3;">
    <span class="h-11 rounded-lg" style="background:#A8E6C1;"></span><span class="h-11 rounded-lg" style="background:#A8E6C1;"></span><span class="h-11 rounded-lg" style="background:#A8E6C1;"></span>
  </div>
  <p class="mt-2.5 font-mono text-[10px] text-[#241430]/70">base: grid-template-columns: 1fr; (starts single-column, big touch targets)</p>
</div>
<style>
.tw-mf-wide { grid-template-columns: repeat(var(--cols), 1fr); }
</style>

react

export function MobileFirst({
  wideOverride = false,
  columns = 3,
  label = "Product grid",
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430" }}>
      <p style={{ margin: "0 0 8px", fontWeight: 600 }}>{label}</p>
      <div style={{ display: "grid", gap: 8, gridTemplateColumns: wideOverride ? `repeat(${columns}, 1fr)` : "1fr" }}>
        <span style={{ height: 44, borderRadius: 8, background: accent }} />
        <span style={{ height: 44, borderRadius: 8, background: accent }} />
        <span style={{ height: 44, borderRadius: 8, background: accent }} />
      </div>
      <p style={{ margin: "10px 0 0", fontFamily: "ui-monospace, monospace", fontSize: 10, color: "#241430aa" }}>
        {wideOverride ? `@media (min-width: 640px) override: ${columns} columns` : "base: grid-template-columns: 1fr; (starts single-column, big touch targets)"}
      </p>
    </div>
  );
}