FlexFlexGrid: Grids using flexbox

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

• Basic grid: rem CodePen
• Gutters: px rem CodePen
• Horizontal lines: px rem CodePen
• Horizontal lines and gutters: px rem CodePen
• Horizontal and vertical lines: px rem CodePen
• Horizontal and vertical lines and gutters: px rem CodePen

Version: 2015-04-17

License: MIT License

FlexFlexGrids

Basic grid

Gutters

Horizontal lines

Horizontal lines and gutters

Horizontal and vertical lines

Horizontal and vertical lines and gutters

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

• Basic grid
• Grid with gutters
• Grid with horizontal lines
• Grid with horizontal lines and gutters
• Grid with horizontal and vertical lines
• Grid with horizontal and vertical lines and gutters