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
|.container||Creates a full width container with 1.6% side margins on larger screens or 3.2%-3.5% on smaller screens.|
Centered container, default width of 1440px. Same margins as
Creates a container with built-in margins adapted to hold the
automatic column types within a
Creates a container with built-in margins to hold full-width block content in a
|.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
$container-max-width. You can also overwrite
.container-max or the custom property
in your regular CSS.
.container-max width is 1440 pixels.
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.
Rows are used for grouping of content in sections within a container.
.rowcreates 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-blockcreates 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
<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:
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
You can prevent columns from stacking altogether with
<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 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 →