flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Grid


Introductie

Het grid systeem van CSS-framework is eenvoudig maar zeer effectief.

Je hebt het row-col col systeem dat is gebaseerd op percentages van 8,33 tot 100 procent. Deze geven kolommen met vaste percentages die horizontaal naast elkaar liggen, maar die ongelijk in hoogte kunnen zijn. Je kunt niet meer dan 12 kolommen naast elkaar plaatsen.

En je hebt het row cell systeem dat is gebaseerd op het moderne css3 flex systeem. Deze bieden flexibele cellen die horizontaal naast elkaar liggen en die gelijk in hoogte zijn. Nogmaals, het is niet raadzaam om meer dan 12 cellen naast elkaar te plaatsen.

De cellen en kolommen krijgen een breedte van 100% en komen onder elkaar te staan op schermen groter dan 768 px.


Voorbeeld row-col col-*

Klik op de Class naam om deze te kopiƫren.

row-col col-1 col-2 col-3 col-4 col-5 col-6 col-7 col-8 col-9 col-10 col-11 col-12

Voorbeeld pc - laptop

Voorbeeld mobiel


Voorbeeldcode:

<div class="row-col">
  <div class="col-4"><p>col-4</p></div>
  <div class="col-8"><p>col-8</p></div>
</div>

Voorbeeld row cell

Klik op de Class naam om deze te kopiƫren.

row cell

Voorbeeld pc - laptop

Voorbeeld mobiel


Voorbeeldcode:

<div class="row">
  <div class="cell"><p>cell</p></div>
  <div class="cell"><p>cell</p></div>
  <div class="cell"><p>cell</p></div>
</div>


© Copyright by Web Henkie
All right reserved
Webmaster