FlexFlexGrid: Grids using flexbox

Work in progress. These grids might be changed substantially. It is best not to use them yet. If you use flexbox, read Flexbugs.

On this page, the number of items per row is altered at 3 breakpoints:

  • 2 at 400px
  • 3 at 600px
  • 4 at 800px

The CSS for each grid contains comments explaining how to adjust the lines and gutters.

All grids have breakpoints for up to 12 items per row.

(This page is limited to four items per row to make sure horizontal and vertical lines are visible. Wider breakpoints are “disabled” by setting them to high em values. To see all breakpoints, just have a look at the CodePen demos.)

Nesting these grids seems to work.

CSS files

Version: 2015-04-17

License: MIT License

FlexFlexGrids

Basic grid

Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!

Gutters

Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!

Horizontal lines

Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!

Horizontal lines and gutters

Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!

Horizontal and vertical lines

Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!

Horizontal and vertical lines and gutters

Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!
Flex!

HTML for all grids

<div class="flex">
    <div class="flex-item">Flex!</div>
    <div class="flex-item">Flex!</div>
    [...]
</div>

Optional: Match margins within flex items

.flex-item :first-child  {
    margin-top: 0 !important;
}
.flex-item :last-child  {
    margin-bottom: 0 !important;
}

FlexFlexGrid advantages (or disadvantages)

  • When using FlexFlexGrid the HTML does not contain specific info about the grid, e.g. .col-md-8 and .col-md-4 for a ratio of 2:1 or .small-Grid--1of2. Instead, classes get names like navigation and content and their flexbox properties are put into the CSS.
  • Only code for the employed grids is added to a project.

Known issues

  • Using rem for line thickness leads to inconsistent line thickness (see this demo). Using px does not, but then zooming no longer scales line thickness. To not look bad at first sight, this page uses px.
  • The container of a grid with vertical lines or vertical gutters requires horizontal margins or padding. Otherwise there will be a horizontal scrollbar. The size of the margins or padding depends on the width of the vertical lines and vertical gutters. See “Lack of a Container” under “Common Problems” in this article and the .container-fluid class in Bootstrap’s CSS. If the container is not meant to have margins or padding, using overflow-x: hidden on the parent container will remove the horizontal scrollbar.
  • These grids have not been extensively tested, use carefully and please report any issues you encounter.

Notes

  • Handling of items with different heights in the same row can be adjusted with the align-items property of the flexbox container (see CSS-Tricks).

Questions, tips, issues?

Please send me an email.

Test pages