Flexbox Grid

Flexbox Grid is simple, robust, flexible and built with Sass.
Fully responsive for desktop, tablet and mobile viewports. Featuring basic grid, sidebar, alignment, nesting and many more.

What is Flexbox


Flexbox is a new layout mode in CSS3

The CSS3 Flexible Box, or flexbox, is a layout mode intended to accommodate different screen sizes and different display devices. For many applications, the flexible box model is easier than the block model since it does not use floats, nor do the flex container’s margins collapse with the margins of its contents.

Many designers find the flexboxes easier to use than boxes. Without a lot of work, div’s frequently rose to the top of a page when designers did not want them to – so for example, sticking a footer to the bottom of a page was difficult. The widths and heights of flexboxes vary to adapt to the display space, holding the lower down elements in place. Flexbox logic also asks whether you want div’s to accrue to the right or on the bottom. The display order of flexbox elements is independent of their order in the source code.

Popular layouts can thus be achieved more simply and with cleaner code. This independence intentionally affects only the visual rendering, leaving speech order and navigation based on a linear reading of the HTML source.

Our Flexbox Grid is ResponsiveFlexible and very simple

It’s about time. We can vertically and horizontally center anything without CSS transform hacks! Flexbox Grid keeps to twelve columns (selectable) and used breakpoints for the responsive layouts (extra small, small, medium, large and extra large) that we come to expect.

Based on Flexbox (CSS Flexible Box Layout Module), the Flexbox Grid System is a very simple css grid to quickly create modern layouts.

Endless Layout Possibilities

Flexbox Grid comes with 3 grid layouts and 2 modes (vertical/horizontal) alignments. Possibilities are endless with a grid system which can handle up to 12 columns.

Grid
Masonry
Justified
That's it

How it works

Our grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is examples and an in-depth look at how the grid works.

Containers

Container are the most basic layout element and are required our grid system. Choose from a responsive, fixed-width container or fluid-width.

Fixed-width container

fixed-width container
<div class="container">
    ...
</div>

Fluid-width container

fluid-width container
<div class="container-fluid">
    ...
</div>

Basic

The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They’re also equal height by default.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
	<div class="row">
		<div class="col-1">...</div>
	</div>
	<div class="row">
		<div class="col-2">...</div>
	</div>
	<div class="row">
		<div class="col-3">...</div>
	</div>
	<div class="row">
		<div class="col-4">...</div>
	</div>
	<div class="row">
		<div class="col-5">...</div>
	</div>
	<div class="row">
		<div class="col-6">...</div>
	</div>
	<div class="row">
		<div class="col-7">...</div>
	</div>
	<div class="row">
		<div class="col-8">...</div>
	</div>
	<div class="row">
		<div class="col-9">...</div>
	</div>
	<div class="row">
		<div class="col-10">...</div>
	</div>
	<div class="row">
		<div class="col-11">...</div>
	</div>
	<div class="row">
		<div class="col-12">...</div>
	</div>
</div>

Auto-Layout

Use breakpoint-specific column classes for equal-width columns. Add any number of a column classes for each breakpoint you need and every column will be the same width.


Equal-width

1 of 2
1 of 2
1 of 3
1 of 3
1 of 3
1 of 5
1 of 5
1 of 5
1 of 5
1 of 5
<div class="container">
	<div class="row">
		<div class="col">...</div>
		<div class="col">...</div>
	</div>
	<div class="row">
		<div class="col">...</div>
		<div class="col">...</div>
		<div class="col">...</div>
	</div>
	<div class="row">
		<div class="col">...</div>
		<div class="col">...</div>
		<div class="col">...</div>
		<div class="col">...</div>
		<div class="col">...</div>
	</div>
</div>

One column width

1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 4
1 of 4
1 of 4
1 of 4
<div class="container">
	<div class="row">
		<div class="col">...</div>
		<div class="col-5">...</div>
		<div class="col">...</div>
	</div>
	<div class="row">
		<div class="col">...</div>
		<div class="col-7">...</div>
		<div class="col">...</div>
	</div>
	<div class="row">
		<div class="col">...</div>
		<div class="col-3">...</div>
		<div class="col">...</div>
		<div class="col-2">...</div>
	</div>
</div>

Variable with content

Variable width content
1 of 3
1 of 3
1 of 3
Variable width content
1 of 3
1 of 3
1 of 3
Variable width content
<div class="container">
	<div class="row justify-content-md-center">
		<div class="col-12 col-md-auto">...</div>
		<div class="col col-lg-3">...</div>
		<div class="col col-lg-2">...</div>
	</div>
	<div class="row">
		<div class="col">...</div>
		<div class="col-12 col-md-auto">...</div>
		<div class="col col-lg-3">...</div>
	</div>
	<div class="row">
		<div class="col">...</div>
		<div class="col">...</div>
		<div class="col col-md-auto">...</div>
	</div>
</div>

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.


Vertical alignment

1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
<div class="container">
	<div class="row align-items-start">
		<div class="col">...</div>
		<div class="col">...</div>
		<div class="col">...</div>
	</div>
	<div class="row align-items-center">
		<div class="col">...</div>
		<div class="col">...</div>
		<div class="col">...</div>
	</div>
	<div class="row align-items-end">
		<div class="col">...</div>
		<div class="col">...</div>
		<div class="col">...</div>
	</div>
	<div class="row">
		<div class="col align-self-start">...</div>
		<div class="col align-self-center">...</div>
		<div class="col align-self-end">...</div>
	</div>
</div>

Horizontal alignment

1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
<div class="container">
	<div class="row justify-content-start">
		<div class="col-4">...</div>
		<div class="col-4">...</div>
	</div>
	<div class="row justify-content-center">
		<div class="col-4">...</div>
		<div class="col-4">...</div>
	</div>
	<div class="row justify-content-end">
		<div class="col-4">...</div>
		<div class="col-4">...</div>
	</div>
</div>

Around

1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
<div class="container">
	<div class="row justify-content-around">
		<div class="col-4">...</div>
		<div class="col-4">...</div>
	</div>
	<div class="row justify-content-around">
		<div class="col-3">...</div>
		<div class="col-3">...</div>
	</div>
	<div class="row justify-content-around">
		<div class="col-5">...</div>
		<div class="col-5">...</div>
	</div>
</div>

Between

1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
<div class="container">
	<div class="row justify-content-between">
		<div class="col-4">...</div>
		<div class="col-4">...</div>
	</div>
	<div class="row justify-content-between">
		<div class="col-3">...</div>
		<div class="col-3">...</div>
	</div>
	<div class="row justify-content-between">
		<div class="col-5">...</div>
		<div class="col-5">...</div>
	</div>
</div>

Nesting

To nest the content with the grid, add a new .row and set of .col-sm-* columns within an existing .col-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that all 12 available columns).

1 of 1
1 of 2
1 of 2
<div class="container">
	<div class="row">
		<div class="col-sm-9">
			...
			<div class="row">
				<div class="col-8 col-sm-6">...</div>
				<div class="col-4 col-sm-6">...</div>
			</div>
		</div>
	</div>
</div>

Reordering


Flex order

Use flexbox utilities for controlling the visual order of the content.

First, but unordered
Second, but last
Third, but first
<div class="container">
	<div class="row">
		<div class="col flex-unordered">...</div>
		<div class="col flex-last">...</div>
		<div class="col flex-first">...</div>
	</div>
</div>

Offsetting columns

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

1 of 2
1 of 2
1 of 2
1 of 2
1 of 1
<div class="container">
	<div class="row">
		<div class="col-md-4">...</div>
		<div class="col-md-4 offset-md-4">...</div>
	</div>
	<div class="row">
		<div class="col-md-3 offset-md-3">...</div>
		<div class="col-md-3 offset-md-3">...</div>
	</div>
	<div class="row">
		<div class="col-md-6 offset-md-3">...</div>
	</div>
</div>

Push and pull

Easily change the order of built-in grid columns with .push-md-* and .pull-md-* modifier classes.

1 of 2
1 of 2
<div class="container">
	<div class="row">
		<div class="col-md-9 push-md-3">...</div>
		<div class="col-md-3 pull-md-9">...</div>
	</div>
</div>

Simple – Flexible – Responsive

Responsive

Breakpoints

The Grid uses breakpoints in source files for a default layout and the media queries are available as Sass mixins.

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
@include breakpoint-up(xs) { ... }
@include breakpoint-up(sm) { ... }
@include breakpoint-up(md) { ... }
@include breakpoint-up(lg) { ... }
@include breakpoint-up(xl) { ... }

Use media queries that go in the other direction.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }
@include breakpoint-down(xs) { ... }
@include breakpoint-down(sm) { ... }
@include breakpoint-down(md) { ... }
@include breakpoint-down(lg) { ... }
@include breakpoint-down(xl) { ... }

Minimum and maximum breakpoint widths.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
@include breakpoint-range(xs) { ... }
@include breakpoint-range(sm) { ... }
@include breakpoint-range(md) { ... }
@include breakpoint-range(lg) { ... }
@include breakpoint-range(xl) { ... }

Responsive modifiers enable specifying different column sizes, offset, alignment and distribution at sm, md, lg and xl viewport widths.

1 of 4
1 of 4
1 of 4
1 of 4
1 of 2
1 of 2
1 of 3
1 of 3
1 of 3
<div class="container">
	<div class="row">
		<div class="col">...</div>
		<div class="col">...</div>
		<div class="col">...</div>
		<div class="col">...</div>
	</div>
	<div class="row">
		<div class="col-8">...</div>
		<div class="col-4">...</div>
	</div>
	<div class="row">
		<div class="col-3">...</div>
		<div class="col-5">...</div>
		<div class="col-4">...</div>
	</div>
</div>

Stacked to horizontal

Using .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop devices.

1 of 2
1 of 2
1 of 3
1 of 3
1 of 3
1 of 4
1 of 4
1 of 4
1 of 4
<div class="container">
	<div class="row">
		<div class="col-sm-8">...</div>
		<div class="col-sm-4">...</div>
	</div>
	<div class="row">
		<div class="col-sm">...</div>
		<div class="col-sm">...</div>
		<div class="col-sm">...</div>
	</div>
	<div class="row">
		<div class="col-sm">...</div>
		<div class="col-sm">...</div>
		<div class="col-sm">...</div>
		<div class="col-sm">...</div>
	</div>
</div>

Mix and match

Don’t you want the columns to stack in grid tiers? Using a combination of different classes for each tier as needed.

1 of 2
1 of 2
1 of 2
1 of 2
1 of 3
1 of 3
1 of 3
<div class="container">
	<div class="row">
		<div class="col-4">...</div>
		<div class="col-8">...</div>
	</div>
	<div class="row">
		<div class="col col-md-3">...</div>
		<div class="col-6 col-md-9">...</div>
	</div>
	<div class="row">
		<div class="col-6 col-md-4">...</div>
		<div class="col-6 col-md-4">...</div>
		<div class="col-6 col-md-4">...</div>
	</div>
</div>

Customize

You can just use the mixins with their default values. Here is an example of using the default settings to create a two-column layout.

...
...
.container {
	max-width: 72em;
	@include create-container();
}
.row {
	@include create-row();
}
.main-content {
	@include create-col-ready();
	@media (max-width: 40em) {
    	@include create-col(6);
	}
	@media (min-width: 40.1em) {
    	@include create-col(9);
	}
}
.sidebar {
	@include create-col-ready();
	@media (max-width: 40em) {
    	@include create-col(6);
	}
	@media (min-width: 40.1em) {
    	@include create-col(3);
	}
}

Playground

Properties for the flex container

flex-direction

1

2

3

4

5


flex-wrap

1

2

3

4

5


align-items

1

2

3

4

5


justify-content

1

2

3

4

5


align-content

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20


Properties for the flex items

align-self

1

2

3

4

5


flex-grow

1

2

3

4

5


flex-shrink

1

2

3

4

5


Flex

Element 1Element 2

1

2


Order

1

2

3

4

5

A FANCY MODERN GRID SYSTEM

All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right. Use Flexbox Grid to take full advantage of css flexible box module for even more control over your sites layout, alignment and distribution of content.

Why Flexbox Grid

  • It’s lightweight – 17KB as minified css file
  • Where flexbox is supported, columns are all the same height by default
  • Flexbox grid cells never push each other out of the way, as with floated grids
  • Support nested grids
  • Masonry layout
  • Masonry image gallery
  • Excellent cross browser support
  • Easily customizable and extensible
  • Built with SASS/SCSS
Flexbox Grid

Flexbox Grid

Available on