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


Introduction

The grid system of CSS framework is simple but very effective.

You have the row-col col system that is based on percentages of 8.33 to 100 percent. These give columns of fixed percentages that are horizontally next to each other but can be uneven in height. You can not place more than 12 columns next to each other.

And you have the row cell system that is based on the modern css3 flex system. These provide flexible cells that are horizontally next to each other and that are level in height. Again, it is not advisable to place more than 12 cells next to each other.

The cells and columns have a width of 100% and come to stand among each other on screens larger than 768 px.


Example row-col col-*

Click on the Class name to copy it.

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

Example pc - laptop

Example mobile


Example code:

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

Example row cell

Click on the Class name to copy it.

row cell

Example pc - laptop

Example mobile


Example code:

<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