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.

Flush Grids

If you 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.

Strict Grids

When you do not want an odd child in a grid to expand to full width when the grid breaks down to mobile, add the "grid--even" class to the main grid container. This will restrict the expansion of the last grid item so it is the same size as the other grid items.

Example of a 5-column grid without the strict setting

Example of a 5-column grid with the strict setting

Even Grids

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 them 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.

Example of a 3-column grid with standard grid item width.

Example of a 3-column grid with --grid-min-width set to 100px wide.

Example of a 3-column grid with --grid-min-width set to 400px wide.

Example of a 3-column grid with --grid-min-width set to 600px wide.