Infinite Grid System Based On CSS Flexbox – Flex One

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 }