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
- 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
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 of2:1
or.small-Grid--1of2
. Instead, classes get names likenavigation
andcontent
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). Usingpx
does not, but then zooming no longer scales line thickness. To not look bad at first sight, this page usespx
. - 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, usingoverflow-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.