Grid

Undernet uses a flex grid that behaves largely like other CSS grids: using rows with nested columns, and spacing/positioning modifiers to enable more complex layouts. Almost every aspect of the grid can be customized within _config.scss, if you’re choosing to go with a more custom pipeline as outlined in the CSS article.

The grid is mobile first, so any breakpoint classes and modifiers take effect from the given breakpoint and wider (ie, medium is 768px and wider).

An important part of Undernet’s grid is it allows you to customize the class names to your liking. This change won’t have any effect on the rest of the framework, and is useful in preventing namespace collisions. The default values are grid, row, and column.

If you need a more custom, 2-dimensional layout, look into CSS Grid.

Also worth note, but not included in detail in this article, are offset and order utility classes which can be used with grid columns to move content across the grid, or even break it. Read more about those here.

Grid Container

The basic wrapper of a layout uses the grid class. Grids are automatically centered (margin: 0 auto) and have a left and right gutter. Note that a grid container is entirely optional if you already have a wrapper with your desired properties.

<div class="grid">
  I’m 992px wide! (default width of a grid)
</div>

A grid is a flex container with column direction.

Grid Widths

These are modifiers to the grid container that change its max-width.

<div class="grid is-narrow">
  .grid.is-narrow
</div>
<div class="grid">
  .grid
</div>
<div class="grid is-wide">
  .grid.is-wide
</div>
<div class="grid is-fluid">
  .grid.is-fluid
</div>

Grid Sections

Sections do the same, but add top and bottom padding. This can be helpful for creating content folds with colored backgrounds (i.e., for marketing pages).

<div class="grid is-section-sm">
  .grid.is-section-sm
</div>
<div class="grid is-section-md">
  .grid.is-section-md
</div>
<div class="grid is-section-lg">
  .grid.is-section-lg
</div>

Rows & Columns

Like other grid systems, layouts are defined with rows and columns.

<div class="grid">
  <div class="row">
    <div class="column">
      .column
    </div>
  </div>
</div>

Rows have no padding or margin, and automatically fill the width of their parent (usually a grid, but not a requirement). Columns, by default, have left, right, and bottom padding. Both are flex containers.

Multiple Columns

If you add a column element inside a row, they stack next to each other with equal width.

<div class="grid">
  <div class="row">
    <div class="column">
      .column
    </div>
    <div class="column">
      .column
    </div>
  </div>
</div>

Multiple Rows

Add more rows within your columns for more advanced layouts. Just make sure the direct descendants of those inner-rows continue to be columns.

<div class="grid">
  <div class="row">
    <div class="column">
      <div class="row">
        <div class="column">
          .column
        </div>
        <div class="column">
          .column
        </div>
      </div>
    </div>
  </div>
</div>

Breakpoint Classes

Undernet comes with helpful breakpoint classes to define how columns should behave at and above a certain size. For example, if you set medium-6 on a column, content will be at half-width in its row as long as the device width is 768px (the default medium value) or wider.

Here are the default breakpoints:

$grid-breakpoints: (
  xs: 0,
  sm 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
) !default;

<div class="grid">
  <div class="row">
    <div class="column is-xs-12 is-lg-8">
      <div class="row">
        <div class="column is-xs-12 is-lg-6">
          .column.is-xs-12.is-lg-6
        </div>
        <div class="column is-xs-12 is-lg-6">
          .column.is-xs-12.is-lg-6
        </div>
      </div>
    </div>
    <div class="column is-xs-12 is-lg-4">
      .column.is-xs-12.is-lg-4
    </div>
  </div>
</div>

Collapse Gutters

Don’t want padding on your grid, rows, and/or columns? You can remove it all with a has-no-p modifier class on a given element. The class won’t have an effect on child elements, so you’ll need to add a modifier to each div. Useful for nested layouts.

<div class="grid has-no-p">
  <div class="row has-no-p">
    <div class="column has-no-p">
      .column.has-no-p
    </div>
  </div>
</div>

Learn more about spacing utilities.

Fullscreen Grid

Create a grid that always takes up the full width and height of your device/browser window.

<div class="grid is-fullscreen">
  <div class="row">
    <div class="column">
      <p>I’m huge, woohoo!</p>
    </div>
  </div>
</div>

You should really only ever need a single row within a full screen grid. From there, you can create as many columns as you need to continue creating more complex layouts.

By default, a row will be vertically centered. To make the row top-aligned, add modifier classes: has-align-items-flex-start and has-align-content-flex-start to push content to the top of the container.

<div class="grid is-fullscreen">
  <div class="row has-align-items-flex-start has-align-content-flex-start">
    <div class="column">
      <p>I’m at the top.</p>
    </div>
  </div>
</div>

… or to the bottom.

<div class="grid is-fullscreen">
  <div class="row has-align-items-flex-end has-align-content-flex-end">
    <div class="column">
      <p>I’m at the bottom.</p>
    </div>
  </div>
</div>

Learn more about alignment utilities.

Is there information missing? Edit this page on Github!