Simplest Responsive CSS Grid System – Fukol

Preview:

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>