Kolomraster met kruisjes New

Visible column grid as a background layer, with crosses where columns meet section lines. Content sits in the same CSS grid, so the grid proves the alignment. Switchable (on/off) and 4, 6 or 12 columns; a ResizeObserver repositions the crosses. Without JS the column lines remain as a CSS gradient.

Stam architecten

Woningbouw en herbestemming in Delft en omstreken.

[ 38 projecten sinds 2011 ]

WatertorenDelft · 2024

HofjeswoningenPijnacker · 2023

SchoolgebouwRijswijk · 2022

4612

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →