Jump to main content
hgrid-icon

Automatic Content Columns

Quickly mark up a flexible layout system by adding .column to one or more HTML elements in a .row.

File location: sass/layout/_auto-columns.scss (GitHub)

Any number .column in a row element will split its width equally: 

<div class="container-max">
  <div class="row">
    <div class="column">
      <p>Column 1 (auto)</p>
    </div>
    <div class="column">
      <p>Column 2 (auto)</p>
    </div>
    <div class="column">
      <p>Column 3 (auto)</p>
    </div>
  </div>
</div>

There are three ways to customize the distance between columns:

  • Modify $column-gutter-width in the @use rule where you initialize hgrid
  • Modify the .column class with regular CSS
  • Modify the custom property --gutter and use it to modify .column

The number of columns in each .row determines the width of each column.

Note: Columns would normally stack vertically on handheld devices (< 769px wide). For the sake of the examples on this page we have applied .no-stack after .row so they make sense for readers on any device.

Column 1 (auto)

Column 2 (auto)

Column 3 (auto)

Column 4 (auto)

Column 5 (auto)

Column 6 (auto)

Column 7 (auto)

Column 8 (auto)

Column 1 (auto)

Column 2 (auto)

Column 3 (auto)

Column 4 (auto)

Column 5 (auto)

Column 1 (auto)

Column 2 (auto)

Column 3 (auto)

Full width (auto)

Remove Column Gutters

Remove margins between columns (aka. gutters) with the override class .no-gutter on the element that holds the .row class. Or add it to individual columns if you want to remove gutters from only those elements. 

<div class="row no-stack no-gutter">
  <div class="column"></div>
  <div class="column"></div>
</div>

<!-- or -->

<div class="row no-stack">
  <div class="column no-gutter"></div>
  <div class="column no-gutter"></div>
</div>

Result:

1

2

Stacking and Preventing Stacking

Columns will by default stack on viewports that are less than 769px wide. Breakpoints for responsiveness can be adjusted in _variables.scss or overwritten with your own values when you import hgrid as either CSS or Sass.

The default breakpoint where columns stack can be overridden by modifying hgrid's $stack-point variable (read more here). You can also override it by adding an alternative breakpoint value to $custom-stack-point and add .custom-stack after .row.

Prevent stacking altogether by adding .no-stack on the element that holds the .row class.

Nesting

Columns can be nested as long as you wrap each new level in a new .row. 

<div class="row">
  <div class="column border-gray padding-5 radius-8"></div>
  <div class="column border-gray padding-5 radius-8">
    <div class="row margin-bottom-0">
      <div class="column padding-10 bg-gray-light text-center">.column</div>
      <div class="column padding-10 bg-gray-light text-center">.column</div>
    </div>
  </div>
</div>
.column
.column
.column
.column

As seen here, if we nest two .columns inside of another .column, the width of the inner columns will be half of the outer one. For each level we nest, the parent element acts as the new "viewport" width to be split in up to 24 hgrid units.

← Previous: Containers

Next: Accurate Columns →