Infinite Grid System Based On CSS Flexbox – Flex One


Author: vladocar
Views Total: 1,148 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 }

See also  Creating Attractive First Lines with CSS ::first-line

Leave a Reply

Your email address will not be published. Required fields are marked *