Lumos has a wide array of grid utilities and an extremely flexible Grid component to allow for customizable and responsive layouts.

Setup

1. Customizing the global column count

Set the site/column-count variable to match the main column count of your design. Most designs use the existing 12 column value. Other designs could be created on a 10 column grid or even 24 column grid. Nearly all of the grid utilities in Lumos and even the grid guides will use the column count we define here.

2. Adjust the site/gutter variable

The site/gutter variable is used as the default gap on all grid utilities.

Grid Component

The Grid component is the default component used for creating layouts in Lumos. It is extremely flexible allowing you to update the grid columns per breakpoint, and use variants to change to an autofit, autofill, or contained variant. To learn more about how to use the Grid component checkout this page: Grid

Grid Utilities

u-grid-autofit

Will stretch and fit the cards into any extra space

u-grid-autofill

Will fill in the grid with empty space when there's less cards (ideal for lists that will be filtered)

Column Count (mode)

Sets the max number of columns the grid can be

Gap (mode)

Sets the horizontal and vertical gap (allows the max column count to work correctly)

To override the vertical gap separately, use the style panel or a utility if needed.