Simplest Responsive CSS Grid System – Fukol

Category: CSS & CSS3 , Layout , Recommended | October 26, 2016
Author: Heydon
Views Total: 1,493 views
Official Page: Go to website
Last Update: October 26, 2016
License: MIT

Preview:

Simplest Responsive CSS Grid System – Fukol

Description:

Fukol™ is a tiny (less than 1kb), extendable, fully responsive, Flexbox based, progressive enhancement CSS grid responsive for modern web design.

Basic usage:

Just include the following CSS styles into your CSS files:

.fukol-grid {
  display: flex; /* 1 */
  flex-wrap: wrap; /* 2 */
  margin: -0.5em; /* 5 (edit me!) */
}

.fukol-grid > * {
  flex: 1 0 5em; /* 3 (edit me!) */
  margin: 0.5em; /* 4 (edit me!) */
}

And then add your content to the grid system following the html structure like this:

<div class="fukol">
  <ul class="fukol-grid">
    <li>Grid Item Here</li>
    <li>Grid Item Here</li>
    <li>Grid Item Here</li>
    <li>Grid Item Here</li>
    <li>Grid Item Here</li>
    <li>Grid Item Here</li>
    ...
  </ul>
</div>

You Might Be Interested In:


Leave a Reply