CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Grid

Overview#

Grids accelerate the development process by imposing a set of constraints that guide developers where to place elements and how to size them. Adhering to the grid ensures no matter what Lumen webpage or application customers use, they are provided with a consistent and familiar experience.

Layout Grid#

Chi includes a responsive mobile-first 12-column layout grid. Built on the flexbox standards, the Chi layout grid allows for complex layouts with minimal markup and styles.

Breakpoints#

DeviceBreakpoint range (px)Breakpoint sizeColumnsGutters (px)
Phone (portrait)0 - 575xs1216
Tablet (portrait)575 - 767sm1216
Tablet (landscape)768 - 991md1224
Laptop/Desktop (small)992 - 1200lg1224
Laptop/Desktop1200+xl1224

Customizing Grid Layouts#

While automatic layout suits many use cases, you will likely need to create more specific and predictable layouts based on your requirements.

Remember that the grid system consists of 12 columns, so each column unit is approximately 8.3% in width. So, to achieve this layout we are using 3 grid column units (1 unit * 3, or 8.3% * 3) to claim 25% of the width for the first column.

Responsive Layout#

Chi defines 5 different viewports: XS, SM, MD, LG and XL. By default, columns in a grid container behave the same across viewport sizes. You will often want to change the layout based on the user's current viewport. You may accomplish this by setting viewport-specific classes to each of your columns that denote sizing or layout preferences for the viewport or viewports you are concerned with changing.

It is important to note that viewport-specific classes apply to their respective viewport and any larger viewport (unless overridden by a larger viewport class). For example, specifying -w-md--6 would apply a width of 6 units to the column in MD, LG and XL viewports.

Try resizing your browser window to see the following examples in action as you change the viewport size.

Alignment#

Container-Level Vertical Alignment#

Setting alignment on the grid container will apply to all columns within the container. Use this method if you do not need to change the vertical alignment for each individual column.