Flex Grid Lite

The Functional Flexbox Column Grid

Flex Grid Lite is a lightweight column grid with all the power of flexbox. Built using a functional CSS approach which means you get exactly what you ask for without any hidden surprises. The resulting file size is far smaller than a traditional column grid.

View on Github

The Basic Auto Layout

Each column inside the grid is automatically assigned an equal share of the total. The columns are built to respect the layout over the content.

.col
.col
.col
<div class='grid'>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
</div>

No Gutters

The padding is built into the grid but can be removed with a modifier class. The padding itself is based on the 8 point grid system but can be modified in the variables file.

.col
.col
.col
<div class='grid grid-nogutter'>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
</div>

Percentage Based Columns

Based on the familiar n/12 column system.

.col.col-3
.col.col-9
.col.col-4
.col.col-4
.col.col-4
.col.col-5
.col.col-2
.col.col-2
.col.col-3
<div class='grid'>
  <div class='col col-3'>
    25% (3/12)
  </div>
  <div class='col col-9'>
    75% (9/12)
  </div>
</div>

Flex Grow Columns

Based on flex-grow this layout style allows for dynamic content distribution. These columns will respect their given ratio and resist dropping onto a second row unlike a percentage based column.

.col.col-grow-2
.col
.col
.col.col-grow-3
.col.col-grow-2
.col
.col.col-grow-3
.col
<div class='grid'>
  <div class='col col-grow-3'>
    Grow 3 Columns
  </div>
  <div class='col'>
    Auto Column
  </div>
</div>

Fixed Columns

Add in the fixed column class and pass the column a defined width or allow content like an image to dictate the desired width. It's recommended to fill the space with dynamic flex columns however you can mix in percent based columns too. Utilizing a fixed column with only percent based columns will make it difficult to reach 100%.

Fixed 168px
Auto Width
.col.col-fixed
.col
.col
<div class='grid'>
  <div class='col col-fixed' style='width:168px;'>
    col col-fixed
  </div>
  <div class='col'>
    col
  </div>
  <div class='col'>
    col
  </div>
</div>

Mixed Columns

This is the real power of flexbox at work in your layouts.

Fixed 168px
Dynamic Width
.col.col-fixed
.col.col-grow-2
.col
Fixed 168px
Dynamic Width
25% of Total Width
.col.col-fixed
.col.col-grow-2
.col
.col.col-3
<div class='grid'>
  <div class='col col-fixed' style='width:168px;'>
    Fixed Column
  </div>
  <div class='col col-grow-2'>
    Grow 2 Column
  </div>
  <div class='col'>
    Auto Column
  </div>
  <div class='col col-3'>
    25% (3/12)
  </div>
</div>

Content Alignment

Vertically align the content inside of a column.

.col-top
.col-middle
.col-bottom
<div class='grid'>
  <div class='col col-top' style='height:96px;'>
    Content aligned to top
  </div>
  <div class='col col-middle' style='height:96px;'>
    Content aligned to middle
  </div>
  <div class='col col-bottom' style='height:96px;'>
    Content aligned to bottom
  </div>
</div>

Column Vertical Alignment

Columns alignment relative to each other inside of the .grid container.

.col-align-top
.col-align-middle
.col-align-bottom
Tall column expanding
the height of
the grid container
<div class='grid'>
  <div class='col col-align-top'>
    Top Aligned Column
  </div>
  <div class='col col-align-middle'>
    Middle Aligned Column
  </div>
  <div class='col col-align-bottom'>
    Bottom Aligned Column
  </div>
  <div class='col' style='height:112px;'>
    Tall Column
  </div>
</div>

Grid Horizontal Alignment

Apply modifier classes to the .grid element to change the alignment of columns.

.grid-start .col.col-6
.grid-center .col.col-3
.grid-center .col.col-3
.grid-end .col.col-6
<div class='grid grid-end'>
  <div class='col col-6'>
    Aligned to the end
  </div>
</div>

Column Distribution

Distribute space around or between columns equally.

.grid-around .col.col-3
.grid-around .col.col-3
.grid-around .col.col-3
.grid-between .col.col-3
.grid-between .col.col-3
.grid-between .col.col-3
<div class='grid grid-between'>
  <div class='col col-3'>
    Equal space between columns
  </div>
  <div class='col col-3'>
    Equal space between columns
  </div>
  <div class='col col-3'>
    Equal space between columns
  </div>
</div>

Column Ordering

Change the order of columns by using the modifier classes .col-first to move a column to the first position or .col-last to move it to the last position.

1
2
3
1
2
.col-first
.col-last
2
3
<div class='grid'>
  <div class='col col-last'>
    1st Column
  </div>
  <div class='col'>
    2nd Column
  </div>
  <div class='col'>
    3rd Column
  </div>
</div>

Use .grid-reverse to reverse the order of all columns.

1
2
3
<div class='grid grid-reverse'>
  <div class='col'>
    1st Column
  </div>
  <div class='col'>
    2nd Column
  </div>
  <div class='col'>
    3rd Column
  </div>
</div>

Grid Nesting

Grids nest easily with no cascading conflicts. Great for complex layouts.

Auto Column
Nested inside
Nested inside
Auto Column 
<div class='grid'>
  <div class='col'>
    Auto Column
    <div class='grid'>
      <div class='col'>
        Nested Inside
      </div>
      <div class='col'>
        Nested Inside
      </div>
    </div>
  </div>
  <div class='col'>
    Auto Column
  </div>
</div>

Media Breakpoints

Media breakpoint classes define the screen size a column should go to 100%. The small .col-sm snaps to 100% at 480px, .col-md at 624px, and .col-lg at 744px. The breakpoint classes will overwrite any other percentage or grow based modifier class. Nesting grids can create more complex responsive layouts.

.col.col-md
.col.col-md
.col.col-lg
.col.col-sm
.col.col-5.col-sm
.col.col-lg
.col.col-grow-2.col-md
.col.col-md
.col.col-lg
<div class='grid'>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
</div>