---
title: CSS layout
slug: Learn/CSS/CSS_layout
tags:
  - Beginner
  - CSS
  - Doorgeefpagina
  - Floating
  - Gids
  - Grids
  - Landing
  - Leren
  - Meerdere kolommen
  - Module
  - Overzicht
  - Positionering
  - Rasters
  - flexbox
  - float
translation_of: Learn/CSS/CSS_layout
---
<div>{{LearnSidebar}}</div>

<p class="summary">Op dit punt gekomen hebben we al gekeken naar de fundamenten van CSS, hoe tekst te stijlen en hoe de dozen te stijlen en de inhoud ervan te manipuleren.  Nu wordt het tijd om te kijken naar hoe we de dozen in de juiste plaats zetten ten opzichte van de viewport en elkaar.  We hebben de noodzakelijke vereisten al gezien, en dus kunnen we nu diep duiken in de CSS layout.  We kijken naar de verschillende displayinstellingen, traditionele layout methoden (dozen laten drijven en ze positioneren), en nieuwe layout opties zoals flexibele dozen.</p>

<h2 id="Vereisten">Vereisten</h2>

<p>Voor je begint aan deze module zou je het volgende al moeten kennen:</p>

<ol>
 <li>De basis van hoe HTML werkt, zoals gezien in de <a href="https://developer.mozilla.org/nl/docs/Learn/HTML/Introduction_to_HTML">Inleiding tot HTML</a> module.</li>
 <li>De CSS fundamenten kennen, zoals besproken in de <a href="https://developer.mozilla.org/nl/docs/Learn/CSS/Introduction_to_CSS">Inleiding tot CSS</a> module.</li>
 <li>Begrijpen hoe je <a href="/en-US/docs/Learn/CSS/Styling_boxes">dozen moet stijlen.</a></li>
</ol>

<div class="note">
<p><strong>Opmerking</strong>: Als je werkt op een computer/tablet/ander apparaat waar je niet de mogelijkheid hebt om je files aan te maken, kan je de meeste voorbeelden uitproberen in een online code-omgeving zoals <a href="http://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>

<h2 id="Gidsen">Gidsen</h2>

<p>Deze hoofdstukken zullen instructies geven over de fundamentele layouttechnieken en -hulpmiddelen die CSS rijk is.</p>

<dl>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introductie tot CSS layout</a></dt>
 <dd>Dit hoofdstuk zal enkele CSS layout mogelijkheden herhalen die we al zagen in vorige modules, zoals de verschillende waarden voor {{cssxref("display")}}, en enkele van de concepten introduceren die we zullen zien doorheen deze module.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats / Drijvers</a></dt>
 <dd>Oorspronkelijk bedacht voor het laten drijven van afbeeldingen in blokken tekst, is de {{cssxref("float")}} eigenschap één van de meest gebruikte hulpmiddelen geworden voor het maken van layouts met meerdere kolommen op webpagina's.  Dit artikel zal alles uitleggen.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positionering</a></dt>
 <dd>Positionering laat je toe om elementen uit de normale flow van de pagina te halen, zodat ze zich anders gedragen: bv. door op elkaar te zitten of altijd in dezelfde plaats te blijven "plakken" in de viewport.  Dit hoofdstuk legt de verschillende mogelijke waarden voor de {{cssxref("position")}} eigenschap uit en hoe je die kan gebruiken.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Praktische positioneringsvoorbeelden</a></dt>
 <dd>Verder bouwend op de basis van positionering uit het vorige hoofdstuk, gaan we nu proberen enkele voorbeelden uit het "echte leven" te bouwen, om te tonen welke zaken er mogelijk zijn met positionering.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox / flexibele dozen</a></dt>
 <dd>Een nieuwe technologie, maar met sterke ondersteuning door de browsers.  <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> wordt bijgevolg al veel gebruikt.  Het verschaft hulpmiddelen die toestaan om zeer snel complexe, flexibele layouts te maken.  Het staat toe om zaken te doen die traditioneel zeer moeilijk waren in CSS.  Dit hoofdstuk legt de basis uit.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids / Rasters</a></dt>
 <dd>Rastersystemen zijn nog een veel voorkomend kenmerk van CSS layouts, die dikwijls met behulp van floats of andere layoutmogelijkheden geïmplementeerd worden.  Stel je voor dat layouts gebruik maken van een vast aantal kolommen (bv. 4, 6 of 12) en dat je inhoud binnen deze denkbeeldige kolommen wordt weergegeven.  In dit hoofdstuk zullen we het basisidee verkennen dat leidde tot de creatie van een raster.  We kijken verder naar voorgemaakt raster dat verschaft wordt door een rasterframework en eindigen door te experimenteren met CSS Rasters, een nieuwe mogelijkheid in de browser die het een pak makkelijker maakt om rasters te implementeren in CSS.</dd>
</dl>

<h2 id="Beoordelingen">Beoordelingen</h2>

<p>De volgende beoordelingen zullen je vaardigheid om pagina's vorm te geven met behulp van CSS testen.</p>

<dl>
 <dt>Een flexibele layout creëeren met meerdere kolommen (TBD)</dt>
 <dd>Deze beoordeling test je vaardigheid in het creëeren van een standaard meerkolommige layout met enkele interessante kenmerken.</dd>
 <dt>Een vastgeplakte controlewidget maken (TBD)</dt>
 <dd>Deze beoordeling test je kunde in positionering doro je te vragen om een vastgeplakte controlewidget te maken die gebruikers toelaat om de instellingen van een web app te openen, ongeacht waar die gebruiker naartoe scrollt op de pagina.</dd>
</dl>