Grid

The grid system supplied with DNA is a fork of Bootstrap’s (v4.3) grid, which means that it’s:

  • mobile first
  • flexbox based
  • twelve columns

Differences between DNA grid and Bootstrap’s grid

  • all class names are prefixed with ys-, ie. .ys-container-fluid
  • the DNA grid does NOT provide flex-utilities
  • It is not possible to set custom padding on the gutters
  • the DNA grid has the option of vertical spacing
  • the DNA grid has variable gutter width depending on the viewport width

How it works

The grid uses containers, rows and columns to align content. A simple example could look like this:

Column content
Column content
Column content
<div class="ys-container-fluid">
  <div class="ys-row">
    <div class="ys-col-lg-4">Column content</div>
    <div class="ys-col-lg-4">Column content</div>
    <div class="ys-col-lg-4">Column content</div>
   </div>
</div>

Grid settings

Extra Small Small Medium Large Extra Large
Viewport width < 576px ≥ 576px ≥ 768px ≥ 992px ≥ 1200px
Max container width n/a 540px 720px 992px 1172px
Class prefix .ys-col .ys-col-sm- .ys-col-md- .ys-col-lg- .ys-col-xl-
Gutter width 2 × 6px 2 × 12px 2 × 16px

Auto layout

It is possible to create equal-width columns (regardless of viewport width) without setting width-specific classes on the columns, ie.:

Column content
Column content
Column content
<div class="ys-container-fluid">
  <div class="ys-row">
    <div class="ys-col">Column content</div>
    <div class="ys-col">Column content</div>
    <div class="ys-col">Column content</div>
  </div>
</div>

Equal-width multi columns

By inserting a “breaking” element, it is also possible to create auto layout columns that span over multiple rows.

Column content
Column content
Column content
Column content
<div class="ys-container-fluid">
  <div class="ys-row">
    <div class="ys-col">Column content</div>
    <div class="ys-col">Column content</div>
    <div class="ys-grid-breaker"></div>
    <div class="ys-col">Column content</div>
    <div class="ys-col">Column content</div>
  </div>
</div>

Responsive columns

It is possible to add classes that determine a columns width depending on the viewport width, which makes responsive layouts very simple.

Column content
Column content
Column content
Column content
Column content
Column content
<div class="ys-container-fluid">
  <div class="ys-row">
    <div class="ys-col-12 ys-col-sm-6 ys-col-md-4 ys-col-lg-2">Column content</div>
    <div class="ys-col-12 ys-col-sm-6 ys-col-md-4 ys-col-lg-2">Column content</div>
    <div class="ys-col-12 ys-col-sm-6 ys-col-md-4 ys-col-lg-2">Column content</div>
    <div class="ys-col-12 ys-col-sm-6 ys-col-md-4 ys-col-lg-2">Column content</div>
    <div class="ys-col-12 ys-col-sm-6 ys-col-md-4 ys-col-lg-2">Column content</div>
    <div class="ys-col-12 ys-col-sm-6 ys-col-md-4 ys-col-lg-2">Column content</div>
  </div>
</div>

Offsetting columns

You can offset columns to the right by adding a ys-offset- class:

Column content
Column content
<div class="ys-container-fluid">
  <div class="ys-row ys-row--vertical-spacing-md">
    <div class="ys-col-3 ys-offset-3">Column content</div>
    <div class="ys-col-3 ys-offset-1">Column content</div>
  </div>
</div>


## Vertical spacing
It is possible to add vertical spacing between columns in layouts that span over multiple rows by adding a modifying class to the `ys-row` element.

<div class="element-preview">
  <div class="element-preview__inner"><div class="ys-container-fluid">
  <div class="ys-row ys-row--vertical-spacing-md">
    <div class="ys-col-6">Column content</div>
    <div class="ys-col-6">Column content</div>
    <div class="ys-col-6">Column content</div>
    <div class="ys-col-6">Column content</div>
    <div class="ys-col-6">Column content</div>
    <div class="ys-col-6">Column content</div>
  </div>
</div>
</div>
</div>

```html
<div class="ys-container-fluid">
  <div class="ys-row ys-row--vertical-spacing-md">
    <div class="ys-col-6">Column content</div>
    <div class="ys-col-6">Column content</div>
    <div class="ys-col-6">Column content</div>
    <div class="ys-col-6">Column content</div>
    <div class="ys-col-6">Column content</div>
    <div class="ys-col-6">Column content</div>
  </div>
</div>

Options provided are:

  • ys-row--vertical-spacing-sm which adds 16px vertical spacing between column elements.
  • ys-row--vertical-spacing-md which adds 24px vertical spacing between column elements.
  • ys-row--vertical-spacing-lg which adds 32px vertical spacing between column elements.
  • ys-row--vertical-spacing-xl which adds 48px vertical spacing between column elements.

More documentation

For more documentation regarding the grid, please refer to Bootstrap’s docs page, but please remember the differences.

Color explanation

  • Component
  • Design guidelines
  • Code guidelines
  • Page