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

Automatic Layout

Grid layouts are defined as a grid container that is composed of one or more rows of columns. By default, columns within a grid container will occupy an equal amount of horizontal space. Content within those columns is constrained to the width of the column (i.e. the column will not widen to accommodate its contents).

<!-- three columns of equal width -->
<div class="chi-grid">
  <div class="chi-col"></div>
  <div class="chi-col"></div>
  <div class="chi-col"></div>
</div>

<!-- five columns of equal width -->
<div class="chi-grid">
  <div class="chi-col"></div>
  <div class="chi-col"></div>
  <div class="chi-col"></div>
  <div class="chi-col"></div>
  <div class="chi-col"></div>
</div>

Removing Gutters

Columns are rendered with a consistent amount of spacing between them. To collapse these margins, you may use the -no-gutter modifier class on the grid container.

<!-- grid container with collapsed margins -->
<div class="chi-grid -no-gutter">
  <div class="chi-col"></div>
  <div class="chi-col"></div>
  <div class="chi-col"></div>
</div>

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.

Column Sizing

You can specify the amount of horizontal space that a column may consume by adding size classes to your column markup. For example, to create a layout with one column taking up 25% of the available space and the second other column taking up 75% of the space, you can add -w--3 and -w--9 to your each column, respectively:

<div class="chi-grid">
  <div class="chi-col -w--3"></div>
  <div class="chi-col -w--9"></div>
</div>

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.

Mixing Column Sizes w/Automatic Layout

When specifying a column size, it is often not necessary to assign an explicit size to each column. In the case above, we could have easily omitted the -w--9 size class from the second column and the layout would remain the same.

For example, if we wanted to create a layout with 3 columns where the left and right columns are fixed in width and the middle column is flexible based on the amount of available space, we would end up with the following:

<div class="chi-grid">
  <div class="chi-col -w--2"></div>
  <div class="chi-col"></div>
  <div class="chi-col -w--2"></div>
</div>

Any columns that do not have an explicit size class associated with them will simply consume an equal amount of the leftover avaible space.

Available Column Sizes

The size classes are defined from -w--1, which takes up ~8.3% of the width to -w--12, which consumes the entire row.

Column Wrapping

Grid containers can accommodate any number of columns, however, the grid system is restricted to a maximum of 12 column units per row. Overflowing the 12 column units will automatically wrap additional columns onto a new row. For example, the following layout is the result of having 24 column units in a single container:

<div class="chi-grid">

  <!-- first 12 column units -->
  <div class="chi-col -w--3"></div>
  <div class="chi-col -w--3"></div>
  <div class="chi-col -w--3"></div>
  <div class="chi-col -w--3"></div>

  <!-- ... and another row consisting of 12 more units -->
  <div class="chi-col -w--6"></div>
  <div class="chi-col -w--6"></div>

</div>

Offset Positioning of Columns

You may position columns with an offset of one or more column units by specifying an offset size class on your column.

<div class="chi-grid">
  <div class="chi-col -w--5 -o--1"></div>
  <div class="chi-col -w--3 -o--3"></div>
</div>

Available Offset Sizes

Offset sizes, like column sizes, range from -o--1, which takes up ~8.3% of the width to -o--11, which consumes ~91.6% of the row.

Reordering Columns

To display a column or columns in an order that is different than that which they appear in the markup, you may apply a reordering modifier class.

<div class="chi-grid">
  <div class="chi-col -n--3"></div> <!-- displayed last -->
  <div class="chi-col -n--1"></div> <!-- displayed first -->
  <div class="chi-col -n--2"></div> <!-- displayed between -->
</div>

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.

Viewport-Specific Column Sizing

The columns in the following rows will be 50% wide until they are in the configured viewport, at which point they will become 12 column units wide.

<!-- 50% on xs viewports; 100% on sm, md, lg and xl viewports -->
<div class="chi-grid">
  <div class="chi-col -w--6 -w-sm--12"></div>
</div>

<!-- 50% on xs and sm viewports; 100% on md, lg and xl viewports -->
<div class="chi-grid">
  <div class="chi-col -w--6 -w-md--12"></div>
</div>

<!-- 50% on xs, sm and md viewports; 100% on lg and xl viewports -->
<div class="chi-grid">
  <div class="chi-col -w--6 -w-lg--12"></div>
</div>

<!-- 50% on xs, sm, md and lg viewports; 100% on xl viewports -->
<div class="chi-grid">
  <div class="chi-col -w--6 -w-xl--12"></div>
</div>

Column Stacking

On extra small (xs) viewports you can make columns stack by specifying the column with the -w-sm or any -w-sm--* size modifier classes. Columns will start out stacked until viewed in the small viewport, at which point they will display horizontally in the row according to automatic layout or its assigned viewport size class.

<div class="chi-grid">
  <div class="chi-col -w-sm--2"></div>
  <div class="chi-col -w-sm--4"></div>
  <div class="chi-col -w-sm"></div>
</div>

Viewport-Specific Column Offsets

You may also use offsets on a per-viewport basis. For example, it may make sense to offset content on a desktop, but where space is limited on a mobile device you may want to have the content occupy more space. In the following example, the column will be offset by 50% when on medium viewports, but will not be offset on extra small or small viewports.

<div class="chi-grid">
  <div class="chi-col -o-md--6"></div>
</div>

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.

-align--top

<div class="chi-grid -align--top" style="height: 160px;">
  <div class="chi-col"></div>
  <div class="chi-col"></div>
  <div class="chi-col"></div>
</div>

-align--center

<div class="chi-grid -align--center" style="height: 160px;">
  <div class="chi-col"></div>
  <div class="chi-col"></div>
  <div class="chi-col"></div>
</div>

-align--bottom

<div class="chi-grid -align--bottom" style="height: 160px">
  <div class="chi-col"></div>
  <div class="chi-col"></div>
  <div class="chi-col"></div>
</div>

Column-Specific Vertical Alignment

Changing the alignment of an individual column is as easy as applying an alignment modifier to the column in question.

<div class="chi-grid" style="height: 160px">
  <div class="chi-col -align--top"></div>
  <div class="chi-col -align--center"></div>
  <div class="chi-col -align--bottom"></div>
</div>