Oefening — 12-koloms Flexbox-raster

We bouwen een eigen 12-koloms systeem met Flexbox. De “gutter” doen we met padding in de kolommen en een negatieve marge op de rij (met calc()). Dankzij de inner .cell zie je de ruimte tussen kolommen duidelijk.

1. HTML-structuur

<section class="flexgrid">
  <div class="row">
    <div class="col-12"><div class="cell">12 kolommen breed</div></div>
  </div>

  <div class="row">
    <div class="col-6"><div class="cell">6</div></div>
    <div class="col-6"><div class="cell">6</div></div>
  </div>

  <div class="row">
    <div class="col-4"><div class="cell">4</div></div>
    <div class="col-4"><div class="cell">4</div></div>
    <div class="col-4"><div class="cell">4</div></div>
  </div>

  <div class="row">
    <div class="col-3"><div class="cell">3</div></div>
    <div class="col-3"><div class="cell">3</div></div>
    <div class="col-3"><div class="cell">3</div></div>
    <div class="col-3"><div class="cell">3</div></div>
  </div>
</section>

2. CSS-basis

/* Basis & variabelen */
* { box-sizing: border-box; }
.flexgrid{
  --gutter: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Rijen: flex + negatieve marge compenseert buitenste halve gutters */
.flexgrid .row{
  display:flex;
  flex-wrap:wrap;
  margin-left:  calc(var(--gutter) * -0.5);
  margin-right: calc(var(--gutter) * -0.5);
  margin-bottom: var(--gutter);
}

/* Kolommen: halve gutter als padding (links/rechts)*/
.flexgrid .row > [class^="col-"],
.flexgrid .row > [class*=" col-"]{
  padding-left:  calc(var(--gutter) * 0.5) !important;
  padding-right: calc(var(--gutter) * 0.5) !important;
  min-width: 0;
}

/* Inner tegel met zichtbare rand & kleur (binnen de padding) */
.flexgrid .cell{
  background:#eef4ff;
  border:1px solid #cfe2ff;
  border-radius:.25rem;
  text-align:center;
  padding:.75rem;
  font-weight:600;
  color:#0b3a6f;
}

/* 12-delig raster*/
.flexgrid .col-12 { flex: 0 0 100% !important;     max-width: 100% !important; }
.flexgrid .col-11 { flex: 0 0 91.6667% !important; max-width: 91.6667% !important; }
.flexgrid .col-10 { flex: 0 0 83.3333% !important; max-width: 83.3333% !important; }
.flexgrid .col-9  { flex: 0 0 75% !important;      max-width: 75% !important; }
.flexgrid .col-8  { flex: 0 0 66.6667% !important; max-width: 66.6667% !important; }
.flexgrid .col-7  { flex: 0 0 58.3333% !important; max-width: 58.3333% !important; }
.flexgrid .col-6  { flex: 0 0 50% !important;      max-width: 50% !important; }
.flexgrid .col-5  { flex: 0 0 41.6667% !important;  max-width: 41.6667% !important; }
.flexgrid .col-4  { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
.flexgrid .col-3  { flex: 0 0 25% !important;      max-width: 25% !important; }
.flexgrid .col-2  { flex: 0 0 16.6667% !important; max-width: 16.6667% !important; }
.flexgrid .col-1  { flex: 0 0 8.3333% !important;  max-width: 8.3333% !important; }

/* Responsief: stapelen onder 768px */
@media (max-width: 768px){
  .flexgrid .row > [class^="col-"],
  .flexgrid .row > [class*=" col-"]{
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

3. Live voorbeeld

4. Uitdagingen

• Maak een rij met .col-2, .col-8 en .col-2.
• Layout: Header .col-12 · Main .col-8 + Sidebar .col-4 · Footer .col-12.
• Kleur kolommen afwisselend met :nth-child() (zie boven).