Kolomraster met kruisjes Nieuw

<!-- Kolomraster met kruisjes · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="krk" data-cols="6"><div class="krk__pg">
<div class="krk__raster" aria-hidden="true"></div><div class="krk__kr" aria-hidden="true"></div>
<div class="krk__rij krk__rij--a"><p class="krk__logo">Stam architecten</p><p class="krk__nav">Projecten · Bureau · Contact</p></div>
<div class="krk__rij krk__rij--b"><h4 class="krk__h">Woningbouw en herbestemming in Delft en omstreken.</h4><p class="krk__meta">[ 38 projecten sinds 2011 ]</p></div>
<div class="krk__rij krk__rij--c"><p class="krk__p"><b>Watertoren</b>Delft · 2024</p><p class="krk__p"><b>Hofjeswoningen</b>Pijnacker · 2023</p><p class="krk__p"><b>Schoolgebouw</b>Rijswijk · 2022</p></div>
</div>
<div class="krk__ctl"><button class="krk__tg" type="button" aria-pressed="true">Raster aan</button>
<div class="krk__seg" role="radiogroup" aria-label="Aantal kolommen"><label><input type="radio" name="krk-k" value="4"><span>4</span></label><label><input type="radio" name="krk-k" value="6" checked><span>6</span></label><label><input type="radio" name="krk-k" value="12"><span>12</span></label></div></div></div>
</div>

/* Kolomraster met kruisjes · NedDev · eigen werk. */
.krk{--krk-c:6;--krk-l:rgba(245,72,15,.35);position:absolute;inset:0;background:#f7f6f3;color:#121212;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;container-type:size}
.krk[data-cols="4"]{--krk-c:4}.krk[data-cols="12"]{--krk-c:12}
.krk__pg{position:relative;flex:1;padding:0 14px;min-height:0}
.krk__raster{position:absolute;top:0;bottom:0;left:14px;right:14px;pointer-events:none;border-right:1px solid var(--krk-l);background-image:repeating-linear-gradient(90deg,var(--krk-l) 0 1px,transparent 1px calc(100% / var(--krk-c)));transition:opacity .25s}
.krk__kr{position:absolute;inset:0;pointer-events:none;transition:opacity .25s}
.krk__kr i{position:absolute;width:9px;height:9px;margin:-4px 0 0 -4px}
.krk__kr i::before,.krk__kr i::after{content:'';position:absolute;background:#c23a0c}
.krk__kr i::before{left:4px;top:0;width:1px;height:9px}.krk__kr i::after{left:0;top:4px;width:9px;height:1px}
.krk.is-uit .krk__raster,.krk.is-uit .krk__kr{opacity:0}
.krk__rij{position:relative;display:grid;grid-template-columns:repeat(var(--krk-c),1fr);align-items:start;padding:10px 0}
.krk__rij+.krk__rij{border-top:1px dashed var(--krk-l)}
.krk.is-uit .krk__rij+.krk__rij{border-top-color:transparent}
.krk__rij p,.krk__h{margin:0;padding:0 6px}
.krk__logo{font:800 13px 'Switzer',sans-serif;letter-spacing:-.01em;grid-column:1/span calc(var(--krk-c) / 2)}
.krk__nav{grid-column:calc(var(--krk-c) / 2 + 1)/-1;font:500 10px 'JetBrains Mono',monospace;text-align:right;color:#444}
.krk__h{grid-column:1/span calc(var(--krk-c) * 2 / 3);font:700 clamp(15px,5.2cqi,30px)/1.08 'Switzer',sans-serif;letter-spacing:-.02em}
.krk__meta{grid-column:calc(var(--krk-c) * 2 / 3 + 1)/-1;font:500 9.5px 'JetBrains Mono',monospace;color:#444;align-self:end}
.krk__p{grid-column:span calc(var(--krk-c) / 3);font-size:11px;color:#444;display:flex;flex-direction:column;gap:2px}
.krk__p b{font-size:12px;color:#121212}
.krk[data-cols="4"] .krk__p{grid-column:span 1}
.krk[data-cols="4"] .krk__p:last-child{grid-column:span 2}
.krk[data-cols="4"] .krk__h{grid-column:1/span 3}.krk[data-cols="4"] .krk__meta{grid-column:4/-1}
.krk__ctl{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 14px;background:#fff;border-top:1px solid rgba(18,18,18,.1)}
.krk__tg{font:600 11px/1 'Switzer',sans-serif;padding:6px 10px;border-radius:999px;border:1px solid #121212;background:#121212;color:#fff;cursor:pointer;transition:background .18s,color .18s}
.krk__tg[aria-pressed="false"]{background:#fff;color:#121212}
.krk__tg:hover{background:#F5480F;border-color:#F5480F;color:#fff}
.krk__tg:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.krk__seg{display:flex;border:1px solid rgba(18,18,18,.25);border-radius:4px;overflow:hidden}
.krk__seg label{position:relative;cursor:pointer}
.krk__seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.krk__seg span{display:block;font:600 11px/1 'JetBrains Mono',monospace;padding:6px 10px;transition:background .18s,color .18s}
.krk__seg label+label span{border-left:1px solid rgba(18,18,18,.25)}
.krk__seg label:hover span{background:#f4f3f1}
.krk__seg input:checked+span{background:#121212;color:#fff}
.krk__seg input:focus-visible+span{outline:2px solid #F5480F;outline-offset:-2px}
.krk.is-uit .krk__seg{opacity:.45}
@media (prefers-reduced-motion: reduce){.krk__raster,.krk__kr{transition:none}}

// Kolomraster met kruisjes · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.krk')||root;
var pg=root.querySelector('.krk__pg'),kr=root.querySelector('.krk__kr'),tg=root.querySelector('.krk__tg'),rad=[].slice.call(root.querySelectorAll('.krk__seg input'));
var naam='krk-k-'+Math.random().toString(36).slice(2,7);rad.forEach(function(r){r.name=naam;});
function teken(){var c=+root.getAttribute('data-cols'),W=pg.clientWidth-28,rijen=[].slice.call(pg.querySelectorAll('.krk__rij')),ys=[];
  rijen.forEach(function(r,k){if(k>0)ys.push(r.offsetTop);});ys.push(pg.clientHeight-1);
  var h='';ys.forEach(function(y){for(var j=0;j<=c;j++){h+='<i style="left:'+(14+W*j/c).toFixed(1)+'px;top:'+y+'px"></i>';}});kr.innerHTML=h;}
tg.addEventListener('click',function(){var aan=tg.getAttribute('aria-pressed')==='true';tg.setAttribute('aria-pressed',aan?'false':'true');tg.textContent=aan?'Raster uit':'Raster aan';root.classList.toggle('is-uit',aan);rad.forEach(function(r){r.disabled=aan;});});
rad.forEach(function(r){r.addEventListener('change',function(){root.setAttribute('data-cols',r.value);teken();});});
if(window.ResizeObserver)new ResizeObserver(teken).observe(pg);teken();
}
init(document.querySelector('.jouw-container'));