Grid

The Grid (.dk-grid) is a flex based grid system. Grids can contain 2, 3, 4, 5, 6 or 12 total columns. Grid widths are designed to be responsive and do not create separate grids for different screen sizes.

Default Usage

  1. Add the classname dk-grid to the parent <div>.

    1a. If you are doing a page-level layout with a max-width that needs to be centered, wrap the entire dk-grid with a div that has the classname of dk-grid__wrapper. If you don't need the max-width and centering you don't need to do this step.

  2. Add child <div> elements for each column using the utility width classes to determine sizes.

    • Use .w-{fraction} or .w-full to set an element to a percentage based width.
    • The available fractions are: .w-{n}/2, .w-{n}/3, .w-{n}/4, .w-{n}/5, .w-{n}/6, .w-{n}/12.

Note: Grids have spacing between columns but not rows.

Code Example:

<div class="dk-grid">
  <div class="w-1/2">
    <div class="box">
      1/2 Width Column
    </div>
  </div>
  <div class="w-1/2">
    <div class="box">
      1/2 Width Column
    </div>
  </div>
  <div class="w-1/2">
    <div class="box">
      1/2 Width Column
    </div>
  </div>
  <div class="w-1/4">
    <div class="box">
      Quarter Width Column
    </div>
  </div>
  <div class="w-1/4">
    <div class="box">
      Quarter Width Column
    </div>
  </div>
</div>

Code Preview:

Responsive

Grid columns can take up different widths at various breakpoints without having to write custom CSS as Digit uses a mobile first breakpoint system, similar to what you might see in Bootstrap or Foundation. This means that unprefixed utility classes (like w-1/2) take effect on all screen sizes, while prefixed utilities (like md:w-1/2) only take effect at the specified breakpoint and above.

In the example below:

  • For column 1 any screen size below MD and the column will become full width. At and above MD the column will be 50% width.
  • For column 2 any screen size below MD and the column will become 3/4. At and above MD the column will be 50% width.

Code Example:

<div class="dk-grid">
  <div class="w-full md:w-1/2">
    <div class="box">Column 1</div>
  </div>
  <div class="w-3/4 md:w-1/2">
    <div class="box">Column 2</div>
  </div>
</div>

Code Preview:

Push & Pull

There is the option to push and pull columns to the left or right. Example use case: you have two columns in a row but you wanted one of them to be offset by a width of w-2/12. Instead of adding an empty column you can push the first column over. The options for pushing and pulling follows this pattern: .push__w-{n}/{2,3,4,5,6,12}, .pull__w-{n}/{2,3,4,5,6,12}

Code Example:

<div class="dk-grid">
  <div class="push__w-1/4 w-3/4">
    <div class="box">Column 1</div>
  </div>
  <div class="w-3/4">
    <div class="box">Column 2</div>
  </div>
</div>

Code Preview: