Grid
Benefits
Globally adjust layouts
Span items across columns and rows using classes instead of IDs
Maintain even column widths
Compatible with any column count
Reduce bloated code & work faster
Setup
Customizing the global column count
Open the .page_code_base
embed and set the --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.
https://youtu.be/FhS5DMYhtzU?si=iPmb4G4jeJP1YJkE&t=154
Adjust the --grid-gap--main
variable
--grid-gap--main
variableAll grid utilities use the --grid-gap--main
variable by default to ensure that grids align with each other across sections.
Grid Utilities
u-grid-desktop, u-grid-tablet, u-grid-landscape
These utilities are automatically responsive and are the most common grid utilities we'll use in Lumos. Their column count matches our global column count on larger breakpoints. They switch to a vertical flexbox on lower breakpoints so that all child columns stack under each other and become full width without us having to adjust the column span count on lower breakpoints.
https://youtu.be/FhS5DMYhtzU?si=wyCD1mugqv5gTdgw&t=545
u-grid-desktop: grid on desktop. vertical flex on tablet & below.
u-grid-tablet: grid on desktop & tablet. vertical flex on mobile landscape & below.
u-grid-landscape: grid on desktop, tablet, & landscape. vertical flex on mobile portrait.
u-grid-custom
This is a one column grid by default, but it can be overridden to any column count we'd like. The column count can be adjusted across breakpoints. This class is useful for a list of card or items where we want to set an explicit column count on each breakpoint.
https://youtu.be/FhS5DMYhtzU?si=lqhKzWhcGXfJOnSF&t=437
The .u-grid-custom
class can even be left on its default of 1 column. In that case, children spanning multiple columns will increase the column count on this grid. This can be helpful for defining how the grid responds across breakpoints by using its children instead of setting column counts on the grid itself.
u-grid-autofit
With .u-grid-autofit
, we define the min width of our columns, 13rem in this case, and the column count will automatically reduce before the columns become smaller than 13rem. This is the most accessible grid because the column count will also reduce if the user increases their font size, not only when they reduce their screen width like the other grids. With autofit, the grid is automatically responsive, but we give up some control. For instance if our grid starts as a 6 column grid, there's no way for us to prevent it from becoming 5 columns or force it to skip to 4 columns instead.
https://youtu.be/FhS5DMYhtzU?si=MN6gfDXDAczFjahA&t=303
If this grid only has one child, it will collaps to be a 1 column grid. If this grid has 2 children, it will expand to be a 2 column grid. This makes autofit a great fit for layouts using conditional visibility.
u-grid-column-2, u-grid-column-3, u-grid-column-4
These utility classes are designed for optimal responsiveness and visual appeal. For example, in a three-item grid, switching to a two-column layout would leave the third item on a separate row. Therefore, the .u-grid-column-3
class transitions directly from a three-column grid to a single-column layout.
https://youtu.be/FhS5DMYhtzU?si=S90ycg6niIALeoOk&t=211
u-grid-column-2: desktop 2 columns. landscape 1 column.
u-grid-column-3: desktop 3 columns. landscape 1 column.
u-grid-column-4: desktop 4 columns. tablet 2 columns. landscape 1 column.
u-grid-breakout
This utility is used when elements need to break out of our container and go to the edge of the screen. An extra column is added to the beginning and end of the grid. Those two outer columns expand to fill the width of the screen. When using this class, ensure it's not inside a .u-container
element.
When using this class, we can apply these custom properties to columns to change where they start and end.
grid-column-start: full;
starts on the left of the screengrid-column-start: content;
starts inside the containergrid-column-end: full;
ends on the right of the screengrid-column-end: content;
ends inside the right of the container
https://youtu.be/FhS5DMYhtzU?si=M-kKDFEt4tR3-8iZ&t=785
u-grid-subgrid
This utility is used for creating a subgrid inside a parent grid. If this element spans over 8 of the parent's columns, then this element will automatically be an 8 column grid.
https://youtu.be/FhS5DMYhtzU?si=u33ETVV-k51cLR1Z&t=655
Subgrid is newly supported in the major browsers and currently has 89% browser support.
Column Utilities
u-column-custom
Starts in its auto position and spans 1 column by default
Useful for setting a custom start & end point across breakpoints
u-column-full
Fills all the columns of its parent grid
u-column-indent
Fills all but the first & last columns of its parent grid
u-column-1 through u-column-12
Starts in the auto position. Spans the relevant column count.
Order Utilities
u-order-first
Moves item to start of list
u-order-first-desktop
Moves item to the start of the list on desktop.
Moves item back to its default position on tablet & below.
u-order-first-tablet
Moves item to the start of the list on desktop & tablet.
Moves item back to its default position on landscape & below.
u-order-last
Moves item to the end of the list
u-order-last-desktop
Moves item to the end of the list on desktop.
Moves item back to its default position on tablet & below.
u-order-last-tablet
Moves item to the end of the list on desktop & tablet.
Moves item back to its default position on landscape & below.
Aligning items to the grid without using grid
Lumos has a --column-width
variable set to the width of a single column plus its gap.
To push an element over by 3 columns so that it aligns with the 4th column, we could use this custom property.
To set an element to the width of three columns, we could use this custom property.
Last updated