Grid

Ready

A 12-column responsive grid with support for automatic-width and ratio-based columns.

How it works#

The structure of BUX Grid consists of a parent grid element bux-grid and child cells bux-grid__cell. By default, the cell widths are distributed evenly across the grid and include gutters between the cells.

Cell 1

Cell 2

Cell 3

<div class="bux-grid">
  <div class="bux-grid__cell">Cell 1</div>
  <div class="bux-grid__cell">Cell 2</div>
  <div class="bux-grid__cell">Cell 3</div>
</div>

Setting cell widths#

Instead of using automatic cell widths, you can set a specific width per cell by adding modifier classes as shown in the example below. The number represents the number of columns out of a total of 12.

Cell 1

Cell 2

Cell 3

<div class="bux-grid">
  <div class="bux-grid__cell bux-grid__cell--6">Cell 1</div>
  <div class="bux-grid__cell bux-grid__cell--3">Cell 2</div>
  <div class="bux-grid__cell bux-grid__cell--3">Cell 3</div>
</div>

Setting cell widths per breakpoint#

You can also set specific widths per cell and per breakpoint by using modifier classes with breakpoint values appended. Breakpoint options include:

@sm*
@md
@lg
@xl
@xxl

* not technically necessary as an empty breakpoint value implies 'sm'.

In this example, each cell will span 12 columns until the large breakpoint when they will span 6, 3, and 3 columns respectively.

Cell 1

Cell 2

Cell 3

<div class="bux-grid">
  <div class="bux-grid__cell bux-grid__cell--12 bux-grid__cell--6@lg">
    Cell 1
  </div>
  <div class="bux-grid__cell bux-grid__cell--12 bux-grid__cell--3@lg">
    Cell 2
  </div>
  <div class="bux-grid__cell bux-grid__cell--12 bux-grid__cell--3@lg">
    Cell 3
  </div>
</div>

Mixing cell widths with auto widths#

It is also possible to mix specific-width and auto-width cells. Just add auto to the cell's modifier class in place of the column number. Auto cells will be evenly distributed across the remaining width of the grid not taken up by specific-width cells.

Cell 1

Cell 2

Cell 3

Cell 4

<div class="bux-grid">
  <div class="bux-grid__cell bux-grid__cell--12 bux-grid__cell--auto@lg">
    Cell 1
  </div>
  <div class="bux-grid__cell bux-grid__cell--12 bux-grid__cell--6@lg">
    Cell 2
  </div>
  <div class="bux-grid__cell bux-grid__cell--12 bux-grid__cell--auto@lg">
    Cell 3
  </div>
  <div class="bux-grid__cell bux-grid__cell--12 bux-grid__cell--auto@lg">
    Cell 4
  </div>
</div>

Removing gutters from the grid#

Depending on your use case, you may want to remove the automatic gutters from your grid. Add the modifier class bux-grid--no-gutters to your grid element.

Cell 1

Cell 2

Cell 3

Cell 4

<div class="bux-grid bux-grid--no-gutters">
  <div class="bux-grid__cell bux-grid__cell--12 bux-grid__cell--auto@lg">
    Cell 1
  </div>
  <div class="bux-grid__cell bux-grid__cell--12 bux-grid__cell--6@lg">
    Cell 2
  </div>
  <div class="bux-grid__cell bux-grid__cell--12 bux-grid__cell--auto@lg">
    Cell 3
  </div>
  <div class="bux-grid__cell bux-grid__cell--12 bux-grid__cell--auto@lg">
    Cell 4
  </div>
</div>