Layout vier kolommen

Verdeling in drie gelijke kolommen vanaf de ingestelde breekpunten.

Benodigde bestanden

Om gebruik te maken van de styling dienen de onderstaande bestanden ingeladen te zijn via het manon.scss bestand.

  • layout/layout-base.scss
  • layout/layout-base-variables.scss
  • layout/layout-column-4.scss
  • layout/layout-column-4-variables.scss

Voorbeeld

Visueel voorbeeld:

Lorem ipsum dolor set

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

Lorem ipsum dolor set

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

Lorem ipsum dolor set

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

Lorem ipsum dolor set

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

HTML-voorbeeld:

div:

--> 
<div class="column-4">
  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>
</div>

section:

--> 
<section class="column-4">
  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>
</section>

article:

--> 
<article class="column-4">
  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>
</article>