Lumos
  • Consistency at Scale
  • Docs
    • Breakpointless
    • Class Naming
    • Page Structure
    • Typography
    • Color
    • Grid
    • Flexbox
    • Sizes & Spacing
    • Fluid Responsiveness
    • Components
    • FAQs
  • Resources
    • Cloneable
    • Figma File
    • Component Library
    • Chrome Extension
    • Changelog
    • Showcase
Powered by GitBook
On this page
  • Setup
  • 1. Customizing the global column count
  • 2. Adjust the site/gutter variable
  • Grid Utilities
  • u-grid-autofit & u-grid-autofill
  • u-grid-above
  • u-grid-below
  • u-grid-custom
  • u-grid-breakout
  • u-grid-subgrid
  • u-grid-flex
  • Column Utilities
  • u-column-custom
  • u-column-full
  • u-column-indent
  • u-column-1 through u-column-12
  • Order Utilities
  • u-order-first
  • u-order-last

Was this helpful?

  1. Docs

Grid

PreviousColorNextFlexbox

Last updated 16 days ago

Was this helpful?

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 Utilities

u-grid-autofit & u-grid-autofill

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)

Override the vertical gap using the style panel or a utility if needed.

Minimum Column Width

Set the minimum width the columns should be before wrapping under custom properties.

u-grid-above

Previously u-grid-from-large, u-grid-from-medium, u-grid-from-small Previously u-grid-desktop, u-grid-tablet, u-grid-mobile

This is a 12 column grid above our breakpoint and switches to a vertical flexbox below our breakpoint. Customize the column count as need for each instance.

The container-name sets the point at which the layout should wrap. Use values of threshold-small, threshold-medium, or threshold-large

u-grid-below

This is a 12 column grid below our breakpoint and switches to a vertical flexbox above our breakpoint. Customize the column count as need for each instance.

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.

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 screen

  • grid-column-start: content; starts inside the container

  • grid-column-end: full; ends on the right of the screen

  • grid-column-end: content; ends inside the right of the container

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.

Subgrid is newly supported in the major browsers.

u-grid-flex

This utility allows us to create grid-like behavior but by using flexbox instead. It is meant to be used with the column-width and column-margin variables. This utility is a horizontal flexbox that wraps and has a gap that matches the main grid gap. It's useful when items only need to span multiple columns instead of not multiple rows.


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

grid-column-start: 1;
grid-column-end: -1;

u-column-indent

Fills all but the first & last columns of its parent grid

grid-column-start: 2;
grid-column-end: -2;

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

Moves item to the end of the list

https://caniuse.com/?search=subgrid