Cosmic Theming - Grid Customization

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

Grid Item 1
Grid Item 2
Grid Item 3

Example of a 3 column grid with the flush setting.

Grid Item 1
Grid Item 2
Grid Item 3

Strict Grids

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.

Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5

Example of a 5 column grid with the strict setting.

Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5

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.

Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5

Example of a 5 column grid with the even setting.

Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5

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.

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

Grid Item 1
Grid Item 2
Grid Item 3

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

Grid Item 1
Grid Item 2
Grid Item 3

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

Grid Item 1
Grid Item 2
Grid Item 3

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

Grid Item 1
Grid Item 2
Grid Item 3