Konstruktor siatki CSS Grid

<main class="grid-builder"><header><h1>Ułóż siatkę.</h1><p>Zmień liczbę kolumn i odstęp między elementami.</p></header><div class="grid-layout"><section class="grid-settings"><div class="field"><label for="grid-columns">Liczba kolumn</label><select id="grid-columns"><option value="2">2</option><option value="3" selected>3</option><option value="4">4</option></select></div><label for="grid-gap">Odstęp: <span id="gap-label">12 px</span></label><input id="grid-gap" type="range" min="0" max="30" value="12"><div class="field"><label for="grid-align">Wyrównanie</label><select id="grid-align"><option value="stretch">Rozciągnij</option><option value="start">Do początku</option><option value="center">Wyśrodkuj</option></select></div><pre id="grid-code" tabindex="0"></pre></section><div id="grid-preview" class="grid-preview" aria-label="Podgląd siatki"><div><b>1</b><span>Element</span></div><div><b>2</b><span>Element</span></div><div><b>3</b><span>Element</span></div><div><b>4</b><span>Element</span></div><div><b>5</b><span>Element</span></div><div><b>6</b><span>Element</span></div><div><b>7</b><span>Element</span></div><div><b>8</b><span>Element</span></div><div><b>9</b><span>Element</span></div></div></div></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#edf0fb;color:#3a315a;--accent:#694e9a}.grid-builder{max-width:820px}.grid-builder h1{font-family:Georgia,serif;font-size:43px}.grid-builder header{margin-bottom:26px}.grid-layout{display:grid;grid-template-columns:260px 1fr;gap:28px}.grid-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:center;background:#dcd8ee;padding:15px;min-height:310px}.grid-preview>div{background:#694e9a;color:#fff;padding:12px;min-height:75px;display:flex;flex-direction:column;justify-content:center}.grid-preview>div:nth-child(3n){background:#3a315a}.grid-preview b{font:27px Georgia,serif}.grid-preview span{font-size:11px}.grid-settings pre{font-size:12px;line-height:1.7;background:#3a315a;color:white;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;margin:18px 0 0}.grid-settings .field{margin-bottom:18px}@media(max-width:560px){.grid-layout{grid-template-columns:1fr}.grid-preview{min-height:260px;padding:10px}.grid-preview>div{padding:8px;min-height:60px}.grid-builder h1{font-size:33px}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const update=()=>{const columns=q('#grid-columns').value,gap=q('#grid-gap').value,align=q('#grid-align').value,preview=q('#grid-preview');preview.style.gridTemplateColumns=`repeat(${columns}, minmax(0, 1fr))`;preview.style.gap=gap+'px';preview.style.alignItems=align;q('#gap-label').textContent=gap+' px';q('#grid-code').textContent=`display: grid;
grid-template-columns:
  repeat(${columns}, minmax(0, 1fr));
gap: ${gap}px;
align-items: ${align};`;};q('#grid-columns').onchange=update;q('#grid-gap').oninput=update;q('#grid-align').onchange=update;update();})();