Home > CSS3 & CSS > Simplest Responsive CSS Grid System – Fukol
Simplest Responsive CSS Grid System – Fukol

Simplest Responsive CSS Grid System – Fukol

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

The CSS

.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!) */
}

The HTML

<div class="fukol"> <!-- 6 -->
  <ul class="fukol-grid">
    <li><!-- grid cell/item/child/whatever --></li>
    <li><!-- grid cell/item/child/whatever --></li>
    <li><!-- grid cell/item/child/whatever --></li>
    <li><!-- grid cell/item/child/whatever --></li>
    <li><!-- grid cell/item/child/whatever --></li>
    <li><!-- grid cell/item/child/whatever --></li>
    <li><!-- grid cell/item/child/whatever --></li>
    <li><!-- grid cell/item/child/whatever --></li>
  </ul>
</div>

Items with different widths

Sometimes you want certain items to be narrower or wider. Maybe you want the fifth item to always be approximately twice the size of a regular item (where space permits). If the regular flex-basis is 5em, then…

.fukol-grid > *:nth-child(5) {
  flex-basis: 10em;
}

Don’t worry, flexbox will make sure there aren’t any gaps.

  Website Demo

About admin