FlexGrid

Grid based on display flex CSS property.

Example

Check out the live demo or take a look at the example folder.

How to use

Grid options

See how aspects of the FlexGrid system work across multiple devices with a handy table.

	Extra small (Default) <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-	.col-xl-
# of columns	12
Gutter width	10px (5px on each side of a column)
Nestable	Yes
Column ordering	Yes

HTML Syntax

FlexGrid uses the same classes as Bootstrap. All you need to keep HTML syntax in that way: row, column, content.

<div class="row">
  <div class="col-xs-6">
    <div class="content">col-xs-6</div>
  </div>
  <div class="col-xs-6">
    <div class="content">col-xs-6</div>
  </div>
</div>

Responsive

Responsive grid works by adding media classes to the grid cells (xs, sm, md, etc.). When those media values are met, the grids automatically adjust accordingly.

<div class="row">
  <div class="col-xs-6 col-sm-10 col-md-8">
    <div class="content">Responsive</div>
  </div>
  <div class="col-xs-6 col-sm-2 col-md-4">
    <div class="content">Responsive</div>
  </div>
</div>

Auto Width

You can set the width of one column and the others will automatically resize around it.

<div class="row">
  <div class="col-xs">
    <div class="content">Auto</div>
  </div>
  <div class="col-xs">
    <div class="content">Auto</div>
  </div>
</div>

Nesting

Grid components are infinitely nestable inside of other grid components.

<div class="row">
  <div class="col-xs">
    <div class="content">
      <div class="row">
        <div class="col-xs">
          <div class="content">Auto</div>
        </div>
      </div>
    </div>
  </div>
</div>

No Gutter

Remove gutter from row.

.row-no-gutter

<div class="row row-no-gutter">
  <div class="col-xs-6">
    <div class="content"></div>
  </div>
  <div class="col-xs-6">
    <div class="content"></div>
  </div>
</div>

Equal Column Height

Add the same height to each column.

.row-equal-height

<div class="row row-equal-height">
  <div class="col-xs-6">
    <div class="content"></div>
  </div>
  <div class="col-xs-6">
    <div class="content"></div>
  </div>
</div>

Horizontal alignment

FlexGrid properties for horizontal alignment. Add classes to align elements.

.row-start

<div class="row row-start">
  <div class="col-xs-6">
    <div class="content">Start</div>
  </div>
</div>

.row-center

<div class="row row-center">
  <div class="col-xs-6">
    <div class="content">Center</div>
  </div>
</div>

.row-end

<div class="row row-end">
  <div class="col-xs-6">
    <div class="content">End</div>
  </div>
</div>

.row-around

<div class="row row-around">
  <div class="col-xs-2">
    <div class="content">Around</div>
  </div>
  <div class="col-xs-2">
    <div class="content">Around</div>
  </div>
  <div class="col-xs-2">
    <div class="content">Around</div>
  </div>
</div>

.row-between

<div class="row row-between">
  <div class="col-xs-2">
    <div class="content">Between</div>
  </div>
  <div class="col-xs-2">
    <div class="content"Between</div>
  </div>
  <div class="col-xs-2">
    <div class="content">Between</div>
  </div>
</div>

Vertical alignment

FlexGrid properties for vertical alignment. Add classes to align elements.

.row-top

<div class="row row-top">
  <div class="col-xs-6">
    <div class="content">Top</div>
  </div>
</div>

.row-middle

<div class="row row-middle">
  <div class="col-xs-6">
    <div class="content">Top</div>
  </div>
</div>

.row-bottom

<div class="row row-bottom">
  <div class="col-xs-6">
    <div class="content">Top</div>
  </div>
</div>

Reversing

.row-reverse

<div class="row row-reverse">
  <div class="col-xs-2">
    <div class="content">1</div>
  </div>
  <div class="col-xs-2">
    <div class="content">2</div>
  </div>
  <div class="col-xs-2">
    <div class="content">3</div>
  </div>
</div>

Reordering

.col-first

<div class="row">
  <div class="col-xs-2">
    <div class="content">1</div>
  </div>
  <div class="col-xs-2">
    <div class="content">2</div>
  </div>
  <div class="col-xs-2 col-first">
    <div class="content">3</div>
  </div>
</div>

.col-last

<div class="row">
  <div class="col-xs-2 col-last">
    <div class="content">1</div>
  </div>
  <div class="col-xs-2">
    <div class="content">2</div>
  </div>
  <div class="col-xs-2">
    <div class="content">3</div>
  </div>
</div>

css

• Development
• Production

<link rel="stylesheet" href="flexgrid.min.css" type="text/css">

Changelog

v1.0.0 - 06/12/2016

• initial release