Many times we want our grid layouts to behave in a specific way different from the default, especially when the grid collapses on mobile. These classes give us a number of ways to adjust how the grids behave. NOTE: Many of these classes are only noticeable on mobile, shrinking your browser window width on this page will allow you to see how they behave.
If we do not want spacing between grid items, use the grid--flush class to make the grid items flush with each other.
Example of a 3 column grid without the flush setting.
Example of a 3 column grid with the flush setting.
There are times we do not want an odd child in a grid to expand to full width when the grid breaks down to mobile. Adding the "grid--even" class to the main grid container will make the last item only expand to the same size as other grid items so it looks similar to the other elements in the grid.
Example of a 5 column grid without the strict setting.
Example of a 5 column grid with the strict setting.
Even grids behave like strict grids, except they center the bottom row elements so that the grid does not have more items on one side.
Example of a 5 column grid without the even setting.
Example of a 5 column grid with the even setting.
Grid Mobile Adjustments
Grids in the cosmic theme are designed to be flexible and work across many different device sizes. However, in some situations, the grids may need to be adjusted to cause it to collapse at different times. This property can be adjusted to allow for this. By default, the grid items will stack when they can fit no more than 200px wide per item.