The grid is a powerful layouting tool. You can use grids to arrange your page frame, position content teasers,
arrange link lists, and basically anything in between. The grid is also set up responsive to allow different
layouts on different devices.
We recommend you use grid-flex for all your grid needs since it takes care of many edge cases that you might encounter. Still, it is not a silver bullet. When migrating to it, please be aware that grid-flex does not work with clear and float. Also, grid introduces a margin-bottom-l by default, while with grid-flex, you'll have to add that manually if you need it. Also note that in the flex grid, grid items no longer have an implicit width of 100%. If you want your elements to be 100% wide, please apply the one-whole class explicitly.
Grids are enclosed in a wrapper that contains the grid's individual columns and determines the
offset (gutters) between single columns.
Note: Be sure to apply no custom styling to a grid container or its grid items.
While this may work in some cases, it will, more likely than not, result in broken layouts due to the way that the grid items
are being positioned beneath the hood. Use wrappers or children instead for borders, backgrounds, paddings, etc.
Gutters
The grid gutter determines whether the content columns of a grid should take up all of the available space, or be separated by
horizontal and/or vertical white space.
The syntax for gutter classes is gutter-<side>-<size> (analogous to Spacings).
Grid Items
Grid items are the elements that form a grid's individual content columns.
Sizes
You can use the global width classes to split your grid columns into fractions of two, three, four, five,
six, eight, ten, and twelve.
Please see the Widths section for a full explanation.
Responsive Grids
The responsive grid has three states:
palm for palm-held devices like mobile phones, smart phones, small tablets, smart watches etc.;
lap for lap-held devices like larger tablets, iPads, netbooks;
desk for desk-top computers, laptops, and generally everything with a screen over 1024 pixels wide.
These states can be explicitly targeted to achieve different layouts for different devices.
Grids can be infinitely nested inside each other. You can also mix and match grids with and without gutters, you can change
the amount of items in each grid, and so forth. Just keep in mind to wrap each grid in its own grid-item.
Pushing
Grid items can be pushed to the right to align elements or to create whitespace. You can do this by using the “push” classes.
Push classes follow the syntax <state>-push-<width-class>, where “state” is one of the usual state
prefixes, i.e. “palm”, “lap”, or “desk”, and “width-class” is one of the width classes
mentioned above.
For example: palm-push-two-thirds will push a grid item to the right by two thirds, but only on palm-sized devices.
Alignment (grid-flex only)
With flex grids, you can specify declaratively how elements should be aligned with each other, leaving all related styling and calculations to the browser.
Vertical Alignment
You can configure vertical alignment either on the container, where it applies to all grid items, or on individual grid items.
To align items, apply one of the grid-align-<alignment> classes, where “<alignment>” is one of start, end, center, baseline, or stretch (default).
Vertical alignment applies to both single- and multi-row grids.
Horizontal Alignment (grid-flex only)
You can also choose how grid content should be justified (that is, horizontally aligned) when there is left-over whitespace in a row.
To justify grid items, apply one of the grid-justify-<alignment> classes to the grid container, where “<alignment>” is one of start (default), center, end, space-between, or space-around.
Ordering (grid-flex only)
In flex grids, you can decide on the order in which individual grid items should be rendered.
This reordering takes place entirely in CSS, which allows you to structure your HTML in whichever way makes the most sense, and then adjust the layout as needed.
The ordering classes are defined as <state->order-<index>-<direction>, where “<index>” is an index from one to five, and “<direction>” is either up or down.
By default, all grid items start with the default index of zero. An item is moved further up or down the higher the index gets.
Between elements with the same index, markup order is preserved.
The rendering order can also be defined for individual device states using the usual prefixes.
Filled-up Grid Rows (grid-flex only)
By default, if a grid row is not completely filled up, it will leave over whitespace.
Applying the grid-fill-rows modifier to a flex grid container will make its grid items split up any left-over whitespace between themselves.
Grid Items with Fixed Widths (grid-flex only)
While regular grids are restricted to fractional widths, flex grids allow you to apply fixed absolute widths to individual columns without breaking the fluidity of the grid as a whole.
In a grid with filled-up grid rows, apply the grid-item-fixed-width modifier class to a grid item that should remain at a fixed width, regardless of the space available.
You can either force a specific width directly on the grid item, or leave the width definition away entirely, in which case the grid item will end up exactly as wide as its content requires.