Layout

There are a few different ways you can create a layout system with hgrid. One of them is the built-in, automatic column grid, where special containers play an important part.

<div class="container">
  <div class="row">
    <div class="column">
      <!-- content -->
    </div>
  </div>
</div>

The container > row > column paradigm is well known from widely used CSS frameworks. It's the basic concept behind a typical hgrid layout as well. These building blocks take care of responsiveness and content stacking for you and are easy to configure and extend.

You can also skip the relative rigidity of the built-in system and freestyle it with just the parts of hgrid that you find useful.

Containers

File location: sass/layout/_containers.scss (GitHub)

Container Utility	Description
.container	Creates a full width container with 1.6% side margins on larger screens or 3.2%-3.5% on smaller screens.
.container-max	Centered container, default width of 1440px. Same margins as `.container`.
.row	Creates a container with built-in margins adapted to hold the accurate and automatic column types within a `.row`.
.row-block	Creates a container with built-in margins to hold full-width block content in a `.row` element.
.group	Creates a container with built-in bottom margin to organize and separate sections of content.

Limited Width Container

.container-max lets you control the max-width of your page with the scss variable $container-max-width. You can also overwrite .container-max or the custom property --container-max-width in your regular CSS.

The default .container-max width is 1440 pixels.

The 1440 pixel .container-max on a 1680 pixel screen. The header uses the full-width .container.

Full Width Container

.container lets your content flow all the way to the edges of the screen, but has a small margin on each side.

Row

Rows are used for grouping of content in sections within a container.

.row creates a container specifically to hold the different column types we'll learn about on the next pages. Because of their negative side margins they aren't suitable for use without columns as child elements.
.row-block creates a container for full-width block content (titles, paragraphs, images, etc.) where there's no need for columns.

Creating layouts with the hgrid columns requires the use of .row:

<div class="container">
  <div class="row">
    <div class="column">
      <p class="mb-0 text-center">Some content 1</p>
    </div>
    <div class="column">
      <p class="normal mb-0 text-center">Some other content 2</p>
    </div>
  </div>
  <div class="row">
    <div class="column">
      <p class="normal text-center mb-0">Some content 3</p>
    </div>
    <div class="column">
      <p class="text-center mb-0">Some other content 4</p>
    </div>
  </div>
</div>

As we can see, columns and rows are separated by gutters/margin. In the example we have added borders for clarity and removed the default margin-bottom from paragraphs with .mb-0. Text is centered with – you guessed it: .text-center.

Some content 1

Some other content 2

Some content 3

Some other content 4

You can use .row-block for full width content that don't need columns, such as headlines, article text with floating images, text columns, etc.

Column Stacking in Rows

.row stacks its columns vertically on screens less than 769px wide. This breakpoint is determined by the variable $stack-point that by default uses the width set in $phone-landscape. You can modify this in the @use rule when importing. You also have access to this breakpoint through the custom property --stack-point.

Preventing Stacking

You can prevent columns from stacking altogether with .no-stack. HTML: <div class="row no-stack">.

Custom Stacking Breakpoint

Different content elements could make it useful to have more than one breakpoint where column stacking kicks in. You can set up an alternative breakpoint with the $custom-stack-point variable if you configure hgrid with the @use rule. Then, declare <div class="row custom-stack"> in your HTML.

Group

.group is used to organize rows of content into sections, or to group and separate content within columns. More about columns on the two next pages.

← Previous: Integrate

Next: Automatic Content Columns →