Grid

The ND Web Theme provides a flexible grid framework for layout purposes. For modern browsers, it uses CSS Grid for the layout. For browsers that don’t support CSS Grid, it uses Flexbox.

How It Works

The grid system works by using the .grid class plus a .grid-*-* modifier class to define the breakpoints and column counts for the grid. Each child element then fills in the next spot. For instance, if you want to have a three-column grid for small device and above:

One of three columns
One of three columns
One of three columns

<div class="grid grid-sm-3">
  <div>1. One of three columns</div>
  <div>2. One of three columns</div>
  <div>3. One of three columns</div>
</div>

The code gives three equal-width columns on small, medium, large, and extra large devices. The same pattern can be used for one- through six-column grids on any of the preset breakpoints. Want a four-column grid on large screens?

One of four columns
One of four columns
One of four columns
One of four columns

<div class="grid grid-lg-4">
  <div>1. One of four columns</div>
  <div>2. One of four columns</div>
  <div>3. One of four columns</div>
  <div>4. One of four columns</div>
</div>

Breakpoints

To make the grid responsive, there are five grid breakpoints: all breakpoints (extra small), small, medium, large, and extra large. Grid breakpoints are based on min-width media queries, so they will apply to the specified breakpoint and all those above it.

	Extra Small	Small	Medium	Large	Extra Large
Max Screen width	None	480px	768px	960px	1600px
Modifier class	`.grid-xs-*`	`.grid-sm-*`	`.grid-md-*`	`.grid-lg-*`	`.grid-xl-*`
Number of cols	1-6	1-6	1-6	1-6	1-6

Multiple modifier classes can be added to a single grid, allowing you to adjust the number of columns at a specific breakpoint.

First Item
Second Item
Third Item
Fourth Item
Fifth Item
Sixth Item

<div class="grid grid-sm-2 grid-md-3 grid-xl-6">
  <div>First Item</div>
  <div>Second Item</div>
  <div>Third Item</div>
  <div>Fourth Item</div>
  <div>Fifth Item</div>
  <div>Sixth Item</div>
</div>

Spanning Columns

To make a grid element span multiple columns, you can use the .span-*-* class.

	Extra Small	Small	Medium	Large	Extra Large
Modifier class	`.span-xs-*`	`.span-sm-*`	`.span-md-*`	`.span-lg-*`	`.span-xl-*`
Number of cols to span	1-6	1-6	1-6	1-6	1-6

First Item
Second Item
Third Item
Fourth Item
Fifth Item
Sixth Item

<div class="grid grid-md-3">
  <div class="span-md-2">First Item</div>
  <div>Second Item</div>
  <div class="span-md-3">Third Item</div>
  <div>Fourth Item</div>
  <div class="span-md-2">Fifth Item</div>
  <div class="span-md-3">Sixth Item</div>
</div>

The .full class can also be used to span from the first column to the last column of a grid.

Full Width

<div class="grid grid-md-3">
  <div class="span-full">Full Width</div>
</div>

Ordering Items

To change the order of a grid element at a certain breakpoint, you can use the .order-*-* class.

	Extra Small	Small	Medium	Large	Extra Large
Modifier class	`.order-xs-*`	`.order-sm-*`	`.order-md-*`	`.order-lg-*`	`.order-xl-*`

Small 1 / Medium 2 / Large 3
Small 2 / Medium 3 / Large 1
Small 3 / Medium 1 / Large 2

<div class="grid grid-md-3">
  <div class="order-md-2 order-lg-3">Medium 2 / Large 3</div>
  <div class="order-md-3 order-lg-1">Medium 3 / Large 1</div>
  <div class="order-md-1 order-lg-2">Medium 1 / Large 2</div>
</div>

Grid Gap

Overriding the Default

By default, the grid has a gap between columns and rows of 2rem. This value is stored in the --grid-gap CSS variable, and can be overridden as needed.

Item 1
Item 2
Item 3
Item 4

<style>
.my-custom-grid { --grid-gap: 3rem; }
</style>

<div class="grid grid-md-2 my-custom-grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

No Gap

In the cases where you want a grid with no gap in between the cells, you can use the .no-gap class.

Item 1
Item 2
Item 3
Item 4

<div class="grid grid-md-2 no-gap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>