Flexbox Grid Test Page
This is the test page for the CSS3 Flexible Box Grid System, which contains examples of all of the supported interfaces.
The grid is based on the following HTML structure:
... using the following CSS block/element/modifiers:
grid: A grid element, i.e. a flex container. The grid element is only intended to be used as a wrapper forgrid-cellelements (see below) and should not contain any actual content. In nested gridsgridelements behave asgrid-cellandgridelements alike.grid-cell: A grid cell element, i.e. a flex item. The cells are the elements that contain actual content.grid--: An optional modifier/utility class exclusively forgridelements, which determines the general behavior of the grid's childgrid-cellelements.g--: An optional modifier/utility class for bothgridandgrid-cellelements, which enables modification of the individual/specific element, e.g. overriding behavior specified by a parentgrid--modifier.
Grid and Grid-Cell Colors
In all of the examples on this page the grid and grid-cell elements are colored in order to display their behavior. These colors are NOT (of course) an integral part of the grid system and should not be used in production - unless you really fancy magenta and cyan. The colors are defined in the test-grid.css stylesheet referenced in the <head> section of the HTML page.
Grid-Cell Count
In many of the following examples the grid--cell-count modifier class has been added to the wrapper grid elements. The modifier class causes underlying grid-cell elements to display their individual position among the total number of grid-cell elements in the given grid.
- Additional Resources
- Flexy Boxes
- A Complete Guide to Flexbox
- Solved by Flexbox
- Using CSS flexible boxes
Basic Grids
With Flexbox the grid-cell (and child grid) elements divide the available space among themselves, and can be laid out either horizontally or vertically.
Automatically Calculated Sizes
In the below example, the grid-cell elements should have equal widths (and heights) without the need for additional size modifiers (refer to sizing for more information).
X-Axis (Horizontal) Grids (default)
Y-Axis (Vertical) Grids
When you want to lay out the grid-cell elements vertically, you can simply add a grid--y modifier class to a grid element and its child (grid and) grid-cell elements will subsequently be ordered along the y-axis.
grid--y modifier class added to grid class elements
Adaptive and Equal Widths (with-content examples)
By default the grid system assigns the minimum required widths to grid-cell elements.
Additional Wrapper Elements Required for IE 10
IE 10 requires additional wrapper elements within the grid-cell elements in order to behave correctly. Just for clarity, the said elements have been given a data-role="IE10" attribute in the below example.
Adaptive Widths (default)
The grid-cell elements in the below test-example should each have a unique width, as the widths are calculated based on the contents of the individual grid-cell elements.
Equal Widths
The below grid-cell elements should be equal in size, because of the grid--even modifier class.
Equal widths
The grid--even has been added to the parent grid elements in the below test-examples, which forces the grid-cell elements to divide the available space equally between them.
Fitted/Shrinked/Wrapped Grid-Cells
By default grid and grid-cell elements stretch and fill up the available space of their parent grid element, but you can change this behavior by adding the modifier classes to the individual elements. The following options are available:
g--fit: Make the element occupy the minimum amount of space along the main axis, i.e. limit the element's main size.g--cross-{type}modifiers: Fitting elements on the cross axis is a little more extensive/complicated as it requires you to make a decision as to how the element should behave more specifically. The below examples will only cover alignment of the elements to the start of cross axis of the parentgridelement, i.e. using theg--cross-startmodifier class. For all the available options, please refer to the cross-axis alignment of individual grid-cells section.g--fit g--cross-{type}: Make the element occupy the minimum amount of space on both the main and cross axis (depending on whichg--cross-{type}modifier is used of course), i.e. shrink-wrap the element to fit its contents.
X-Axis Grid
Line 2
g--fitLine 2
g--cross-startLine 2
g--fit g--cross-startAbsolute height
The following examples have an absolute height specified on the test container element.
g--fitg--cross-startg--fit g--cross-startAlignment
Main-Axis Alignment
The alignment of grid-cell and nested grid elements along the main-axis is controlled by applying modifier classes to the parent grid element.
Wrapped elements
For the main-axis alignment test-cases the g--fit modifier class has been added to the grid-cell elements to prevent them from spanning the main axis of the grid.
Start
grid--main-start modifier class added to parent grid element. In theory this is unnecessary as it is the default setting, but now we have a class so that we can apply the setting declaratively.
X-Axis Grid
Y-Axis Grid
Center
grid--main-center modifier class added to parent grid element.
X-Axis Grid
Y-Axis Grid
End
grid--main-end modifier class added to parent grid element.
X-Axis Grid
Y-Axis Grid
Space Between
grid--main-space-between modifier class added to parent grid element.
X-Axis Grid
Y-Axis Grid
Space Around
grid--main-space-around modifier class added to parent grid element.
X-Axis Grid
Y-Axis Grid
Cross-Axis Alignment
Alignment of grid-cell elements along the cross-axis can either be generally controlled by specifying a modifier class on the parent grid element, or individually controlled by specifying a modifier class on the grid-cell element itself.
General Alignment of Child grid-cells
Absolute Heights Added to Examples
In order to display the alignment options a style="height" attribute has been added to the wrapper grid elements.
grid-cross-start modifier class added to grid element.
grid--cross-center modifier class added to grid element.
grid--cross-stretch modifier class added to grid element. This is the default behavior.
Font-Sizes Hard-Coded
The baseline alignment ensures the same baseline for elements regardless of their individual font-sizes. Hence, each grid-cell element in the following example has its own font-size, specified by a style="font-size" attribute.
grid--cross-baseline modifier class added to grid element.
grid--cross-end modifier class added to grid element.
Cross-Axis Alignment of Individual grid-cells
Alignment of grid-cell elements along the cross-axis is controlled by applying modifier classes to the elements themselves.
Baseline Alignment
In order for the baseline alignment to work, there has to be multiple baseline aligned items within a grid. Hence, the elements containing the text baseline 2 have been added to the examples.
X-Axis Grid
Y-Axis Grid
Individual Cross-Axis Alignment in Generally Aligned Grid
grid--cross-end modifier class added to parent grid element to align grid-cell elements along the end of the cross axis, but the modifier classes of the individual grid-cell elements overrides this setting.
Individual Cross-Axis Alignment in Generally Aligned Grid (Y-Axis Grid)
Grid-Wide Grid Cell Gutters (grid--gutters)
Sometimes you want to apply the same behavior to all child grid-cell elements of a grid by applying a modifier class to the grid element itself.
General Gutters (Omnidirectional)
Omnidirectional gutters applied to all child grid-cell elements of modified grid element.
grid--gutters modifier class added to grid elements.
X-Axis Grid
Y-Axis Grid
Edge Gutters
Add gutters between the grid and the grid-cell elements.
grid--gutters-edge modifier class added to grid elements.
X-Axis Grid
Y-Axis Grid
Main-Axis Gutters
Add gutters between the grid and the grid-cell elements on the main axis.
grid--gutters-main modifier class added to parent grid element.
X-Axis Grid
Y-Axis Grid
Cross-Axis Gutters
Add gutters between the grid and the grid-cell elements on the cross axis.
grid--gutters-cross modifier class added to parent grid element.
X-Axis Grid
Y-Axis Grid
Grid-Cell Spacing
Add gutters between the grid-cell elements on the main axis.
grid--gutters-between modifier class added to the parent grid element.
X-Axis Grid
Y-Axis Grid
Individual Grid Cell Gutters (g--gutter)
The individual grid cell gutters are used to apply spacing to specific grid-cell elements via modifier classes applied to the elements themselves.
General Gutters (Omnidirectional)
g--gutter added to guttered grid-cell elements.
g--gutterg--gutterg--gutterDirectional Gutters
The following modifiers have been applied to the individual grid-cell elements:
g--gutter-top: Adds gutters to the top of an element.g--gutter-right: Adds gutters to the right of an element.g--gutter-bottom: Adds gutters to the bottom of an element.g--gutter-left: Adds gutters to the left of an element.
g--gutter-topg--gutter-rightg--gutter-bottomg--gutter-leftAxis-Wide Gutters
g--gutter-x modifier added to the guttered element.
g--gutter-xg--gutter-yMain-Axis Gutters
g--gutter-main modifier added to the guttered element.
X-Axis Grid
g--gutter-mainY-Axis Grid
g--gutter-mainCross-Axis Gutters
g--gutter-cross modifier added to the guttered element.
X-Axis Grid
g--gutter-crossY-Axis Grid
g--gutter-crossNested Grids
grid--gutters modifier class added to grid elements to add spacing between grid elements. For more details, please refer to grid spacing section.
Sizing
Proportional sizing of the individual grid-cell elements is achieved by applying a g--XofX, e.g. g--1of2, g--1of3 etc., modifier class to the grid-cell elements that you want to size.
g--1of6g--1of5g--1of4g--1of3g--1of2g--2of3g--3of4Mixed Example
g--1of5g--1of5g--1of5g--1of3g--1of3Y-axis Grid
Absolute height on grid elements
The height of the example container has been absolutely defined, and the container grid elements has had the grid--stretch-height modifier class applied as otherwise the grids would collapse.
g--1of6g--1of5g--1of4g--1of3g--1of2g--2of3g--3of4Mixed Example
g--stretch-height modifier added to nested grid grid--y elements.
g--1of5g--1of5g--1of5g--1of3g--1of3Flex Grow
Modifier class g--byX used to size elements.
g--by1g--by2g--by3g--by4g--by5Y-Axis Grid
Contrary to the g--XofX definitions, the g--byX definitions don't need an absolute height specified on the parent y-axis grid element in order to work.
g--by1g--by2g--by3g--by4g--by5Grid-Cell Wrapping in a Grid
By default, grid-cell elements will overflow the parent grid if their combined content is larger than the grid permits. You can change this by adding a modifier class to the parent grid.
Default Behavior
grid-cellgrid-cellgrid-cellgrid-cellgrid-cellgrid-cellgrid-cellgrid-cellWrap
grid--wrap modifier class added to parent grid element.
grid-cellgrid-cellgrid-cellgrid-cellgrid-cellgrid-cellgrid-cellgrid-cellGrid-Cell Scrolling
Especially for when developing single-page applications (SPAs) you want to be able to have scroll-views which scrolls overflowing content.
Hardcoded height
The the containing grid element has had the grid--stretch-height modifier class applied in order to fill out the text container.
The modifier class g--scroll has been added to scrolling grid-cell.
An additional unspecified wrapper element (identified as data-role="wrapper" in the below example) is required in order for regular HTML content to display correctly - try removing the element and you will notice that the p elements line up beside each other instead of below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae felis in leo sollicitudin dapibus. Cras eget porta sem. Vivamus venenatis quam eget orci aliquet consequat. Donec feugiat pretium diam, non consectetur purus dignissim eget. Quisque ac nisl laoreet, auctor nisl ac, commodo sapien. Integer at dui sed ligula sollicitudin auctor et at diam. Integer dolor nulla, rhoncus tristique nunc ac, consectetur vulputate mi. Nam consectetur, enim et faucibus pulvinar, lorem elit mattis nibh, in porttitor magna augue vitae elit. Nunc ornare luctus magna, et suscipit dui molestie ac. Sed sodales nulla quam, eu faucibus massa fringilla in. Integer sed tortor luctus, hendrerit ante at, commodo nulla.
Nulla facilisi. Proin blandit molestie dui, ac porttitor magna elementum id. Praesent consectetur sagittis lectus, at tempor justo vulputate vitae. Cras turpis nulla, aliquet sed sapien eu, accumsan lobortis ipsum. Sed at nisi sodales, varius felis id, vulputate purus. Ut accumsan metus tortor, non accumsan lectus viverra at. Donec ullamcorper ipsum rutrum, cursus justo eu, dignissim leo. Fusce pellentesque adipiscing dui nec viverra.
The grid--gutters modifier class has been added to the wrapper grid element in the below example in order to better display the individual scrolling grid-cell elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae felis in leo sollicitudin dapibus. Cras eget porta sem. Vivamus venenatis quam eget orci aliquet consequat. Donec feugiat pretium diam, non consectetur purus dignissim eget. Quisque ac nisl laoreet, auctor nisl ac, commodo sapien. Integer at dui sed ligula sollicitudin auctor et at diam. Integer dolor nulla, rhoncus tristique nunc ac, consectetur vulputate mi. Nam consectetur, enim et faucibus pulvinar, lorem elit mattis nibh, in porttitor magna augue vitae elit. Nunc ornare luctus magna, et suscipit dui molestie ac. Sed sodales nulla quam, eu faucibus massa fringilla in. Integer sed tortor luctus, hendrerit ante at, commodo nulla.
Nulla facilisi. Proin blandit molestie dui, ac porttitor magna elementum id. Praesent consectetur sagittis lectus, at tempor justo vulputate vitae. Cras turpis nulla, aliquet sed sapien eu, accumsan lobortis ipsum. Sed at nisi sodales, varius felis id, vulputate purus. Ut accumsan metus tortor, non accumsan lectus viverra at. Donec ullamcorper ipsum rutrum, cursus justo eu, dignissim leo. Fusce pellentesque adipiscing dui nec viverra.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae felis in leo sollicitudin dapibus. Cras eget porta sem. Vivamus venenatis quam eget orci aliquet consequat. Donec feugiat pretium diam, non consectetur purus dignissim eget. Quisque ac nisl laoreet, auctor nisl ac, commodo sapien. Integer at dui sed ligula sollicitudin auctor et at diam. Integer dolor nulla, rhoncus tristique nunc ac, consectetur vulputate mi. Nam consectetur, enim et faucibus pulvinar, lorem elit mattis nibh, in porttitor magna augue vitae elit. Nunc ornare luctus magna, et suscipit dui molestie ac. Sed sodales nulla quam, eu faucibus massa fringilla in. Integer sed tortor luctus, hendrerit ante at, commodo nulla.
Nulla facilisi. Proin blandit molestie dui, ac porttitor magna elementum id. Praesent consectetur sagittis lectus, at tempor justo vulputate vitae. Cras turpis nulla, aliquet sed sapien eu, accumsan lobortis ipsum. Sed at nisi sodales, varius felis id, vulputate purus. Ut accumsan metus tortor, non accumsan lectus viverra at. Donec ullamcorper ipsum rutrum, cursus justo eu, dignissim leo. Fusce pellentesque adipiscing dui nec viverra.
Ordering
With flexbox you can change the order of appearance for flex-items without having to change the order of the HTML.
By default, each flex-item has an order: 0 (the equivalent of box-ordinal-group: 1 in older browsers/versions of Flexbox) - and the higher the order value, the farther back the element will be rendered. This means that if you only specify an order value higher than 0 on a single grid-cell in a collection (leaving the rest unspecified), the element with the order value higher than 0 will be rendered at the end of the collection, as the rest of the elements will have order: 0 by default.
CSS Pseudo Classes Still Respected Although Visual Order Has Changed
When using flexbox's reordering capabilities the style-definitions for the CSS pseudo classes :first-child and :last-child still follow the HTML element order.
The grid--gutters modifier class has been added to the grid elements to showcase the problem, i.e. that gutters which should have been applied at the start and end of the grid are instead applied between the grid-cell elements. Although this is not a deal-breaker, it's something to be aware of when developing flexbox components.
g--order1 modifier class added to the first grid-cell element.