Infinite Grid System Based On CSS Flexbox – Flex One

Category: CSS & CSS3 , Layout , Recommended | November 16, 2018
Author: vladocar
Views Total: 202
Official Page: Go to website
Last Update: November 16, 2018
License: MIT

Preview:

Infinite Grid System Based On CSS Flexbox – Flex One

Description:

Flex One is a dead simple CSS class to create infinite responsive grid systems based on CSS flexbox layout.

How to use it:

Create the html fo the gird system.

<div class="column">
  <div class="column">
    <div class="row">50%</div>
    <div class="row">50%</div>
  </div>

  <div class="column">
    <div class="row">33,3%</div>
    <div class="row">33,3%</div>
    <div class="row">33,3%</div>
  </div>

  <div class="column">
    <div class="row">25%</div>
    <div class="row">25%</div>
    <div class="row">25%</div>
    <div class="row">25%</div>
  </div>

  <div class="column">
    <div class="row">20%</div>
    <div class="row">20%</div>
    <div class="row">20%</div>
    <div class="row">20%</div>
    <div class="row">20%</div>
  </div>

  <div class="column">
    <div class="row">16,66%</div>
    <div class="row">16,66%</div>
    <div class="row">16,66%</div>
    <div class="row">16,66%</div>
    <div class="row">16,66%</div>
    <div class="row">16,66%</div>
  </div>

  <div class="column">
    <div class="row">12,5%</div>
    <div class="row">12,5%</div>
    <div class="row">12,5%</div>
    <div class="row">12,5%</div>
    <div class="row">12,5%</div>
    <div class="row">12,5%</div>
    <div class="row">12,5%</div>
    <div class="row">12,5%</div>
  </div>
</div>

Add the necessary CSS to the rows.

.row{ flex:1 }

You Might Be Interested In:

Leave a Reply