Flex Grid

What is a grid?

A grid system allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion.

Why flex?

What is Flex?

Flex has the ability to alter its items' width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow resulting in less columns appearing out of place and a cleaner layout.

CSS Attributes
  • display: flex; | Use flex on container (.row) | Any direct children are flex items
  • flex: 1 0 auto; | Control behavior for flex items (.col) | shorthand for flex-grow, flex-shrink, flex-basis
  • flex-grow: integer; | Can it grow above basis? 0 = no, 1 = yes, 2 = twice as fast as siblings
  • flex-shrink: integer; | Can it shrink below basis? 0 = no, 1 = yes, 2 = twice as fast as siblings
  • flex-basis: auto / % / px / em; | Grow Shrink from this point | Auto uses width property and if that is auto, it uses the contents
Notes
  • Any direct child of a display:flex container (i.e. .row) is recognized as a flex item (.col-) even without a class name. This is standard behavior and not part of this grid.
  • Position: fixed / absolute containers are taken out of flex flow.
  • Entensive Guide for understanding all of the properties of flex. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Support

Tested in Chrome, Firefox, Safari, IE 10 / 11. Falls back to table behavior with most functionality for IE 8,9.

		<!--[if lte 9]>
<link rel="stylesheet" type="text/css" href="grid-ie.css" />
<![endif]-->

Source LESS files

Simple Syntax

row > column > content

<div class="row">
<div class="col-xs-12">
Content
</div>
</div>

Standard 12 Columns

Percent based widths allow fluid resizing of columns and rows.

12
1
11
2
10
3
9
4
8
5
7
6
6
...

Responsive

Responsive modifiers enable different behaviors at different screen sizes. i.e. column widths, offsets, alignment and distribution.

Responsive modifiers apply to devices with screen widths greater than or equal to the target size, and override grid classes at smaller target sizes.

  • -xs > 0;
  • -sm ≥ 480px;
  • -md ≥ 768px;
  • -lg ≥ 1200px;
  • -xl ≥ 1400px;
Examples
  • .col-xs-10 applies to everything greater than zero unless there is another class targeting a greater width.
  • .col-md-6 applies to everything greater than or equal to 768px unless there is another class targeting a greater width.
...

Auto Width

Leave the width off for automatically divided columns with equal spacing.

.col-xs
.col-xs
.col-xs
.col-xs
.col-xs
.col-xs
.col-xs
.col-xs
.col-xs-6
...

Content Based Column Width

Add any number of auto sizing columns to a row with table-auto class for columns based on content width. Sets the columns to flex:1 1 auto;

Quite a lot more content is in this cell
Little Bit Less
Least
...

Fixed + Fluid

Set one column to flex: 0 0 width; using .flex-fixed(@width); mixin

.col-xs
300px
...

/*LESS*/
.some-fixed-width-element {
	.flex-fixed(300px);
}

Nesting

Nest grids inside grids inside grids. All columns having padding of 1 rem and 0 margin. Row's have margin bottom of 1 rem except the last row in a series.

Structure: row > col > row > col

...

Offsets

.col-*-offset-
  • Offset a column using left margin. Affects siblings.
  • If you're supporting IE9 or lower you would use an empty column instead of these classes.
...

Push Pull

.col-*-push-#, .col-*-pull-#,
  • Position relative left (push) and right (pull) columns. Doesn't affect siblings.
  • If you're supporting IE9 you should fill all 12 columns.
...
Simple Order Changing with push pull
1
2
...

Wrapping

.no-wrap

By default when there is insufficient room, entire columns will wrap. Add .no-wrap to your row to disable this.

Nothing wraps in IE9 already.

Alignment

Vertical

Note: Vertical alignment will make direct children into block elements and this cannot be overriden. Wrap your content in a div or other container to maintain expected appearance.

default
.top-xs
.middle-xs
.bottom-xs
...
Horizontal
default
.left-xs
.center-xs
.right-xs
...

Distribution

Add classes to distribute the contents of a row or column. No support for IE9 and below.

.around-

Area AROUND columns is spaced evenly.

...
.between-

Area BETWEEN columns is spaced evenly.

...

Flex Reordering

Add classes to reorder columns. No support for IE9 and below.

.first-
1
2
3
4
5
6
...
.last-
1
2
3
4
5
6
...
.REVERSE- / .FORWARD-
1
2
3
4
5
6
...

Responsive Hide / Show

.visible-

Only visible on target width. Items receive display: none by default.

.visible-*, .visible-*-block

Show using display:block

.visible-*-inline-block

Show using display:inline-block

.visible-*-inline

Show using display:inline

.visible-xs
.visible-sm
.visible-md
.visible-lg
.visible-xl
...
.hidden-

Only hidden on target width.

.hidden-md
...
Viewing XS
Viewing SM
Viewing MD
Viewing LG
Viewing XL
Grid