Infinite Grid System Based On CSS Flexbox – Flex One

Category: CSS & CSS3 , Layout , Recommended | November 16, 2018
Author:vladocar
Views Total:1,419 views
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