Skip to navigation Skip to navigation Skip to content

Applying layouts

Learn about whitespace units, layout tips, and Hydrogen's flexbox grid system.

Whitespace multiplier units #

Hydrogen enhances standard CSS layout by introducing a new unit called vertical rhythm multipliers. While Hydrogen attributes will accept standard CSS units like px, rem, and vw where you would expect them to work, you can also use vertical rhythm multipliers in these same properties.

As described in the typography styling section, these multiplier units are created by, and adapt to, your project's current typography settings. At their core, multipliers are rooted in your typography's body line-height value.

1
2
3
4
x1 : (line-height x 1)
x2 : (line-height x 2)
x3 : (line-height x 4)
...

By using multipliers to apply whitespace (padding, margin, gap, etc.), your interface creates a harmony and sustained rhythm with your typography, even across media queries.

1
2
3
<p data-h2-padding="base(x2 x1)"></p>
<p data-h2-margin-top="base(x3)"></p>
<p data-h2-gap="base(x1.5)"></p>

Approaching grids #

Beyond whitespace, your most powerful layout tool will be grids. Hydrogen supports all of the standard CSS layout properties you know and love, including CSS grid and flexbox.

Standard CSS options #

For detailed information on CSS grid or flexbox and their respective properties, please refer to the guides found on MDN. You can combine these properties with Hydrogen's query functionality to rapidly create dynamic, adaptable layouts that meet your project's needs.

index.html 
1
2
3
4
5
6
7
8
9
10
11
<div
  data-h2-display="base(grid)"
  data-h2-grid-template-columns="
    base(1fr)
    p-tablet(1fr 1fr)
    desktop(1fr 1fr 1fr)"
  data-h2-gap="base(x1) desktop(x3)">
  <div></div>
  <div></div>
  <div></div>
</div>

Hydrogen's flexbox grid #

Beyond standard CSS properties, Hydrogen also offers a custom-built, ready to use flexbox-based grid system that makes layouts a breeze. By applying the data-h2-flex-grid property and nesting child data-h2-flex-item elements, you can create dynamic grids in seconds.

Flex grids

The first step in using the flex-grid system is to apply the data-h2-flex-grid property to the parent grid wrapper. The grid item accepts the following parameters:

  • alignment: accepts any standard align-items CSS value.
  • column-gap: applies a CSS unit or Hydrogen multiplier to the space between columns.
  • row-gap: applies a CSS unit or Hydrogen multiplier to the space between rows.

Note that pairing flex-grid with margin will not work, and flex-grid will always take precedence. This is the due to flex-grid requiring specific margins in order to work as intended. You can get around this by using padding or wrapping the flex-grid element in a div and applying the margin to that instead.

index.html 
1
2
3
<div data-h2-flex-grid="base(alignment, column-gap, row-gap)">
  children
</div>

Flex items

The next step is to add the data-h2-flex-item attribute to the grid's child elements. Each grid item's width in the grid can be controlled using the following syntax:

  • XofY: where X is the width you want the item span, and Y is the total number of columns in the grid.

This approach is unique in the sense that each item can have a different value for the "total columns in the grid" value. The XofY syntax functions as a fraction that is divided, resulting in a percentage width for the item. The goal then, is to have items add up to 100%, at which point, the following items will start a new row.

For example, 1of2 will span 50% of the grid's width, meaning subsequent items you want in the same row need to add up to 50% (e.g. 3of10 + 1of5).

index.html 
1
2
3
4
5
<div data-h2-flex-grid="base(flex-start, x2, x1)">
  <div data-h2-flex-item="base(1of1) desktop(1of2)"></div>
  <div data-h2-flex-item="base(1of1) desktop(3of10)"></div>
  <div data-h2-flex-item="base(1of1) desktop(1of5)"></div>
</div>

Theme-specific layouts #

In rare cases, you might want to alter a layout based on the currently active theme. While the styles you define will apply to all themes by default, you can add the theme's unique key value to a query to specify styles for that theme specifically.

For example, changing a grid's column template: data-h2-grid-template-columns="base(1fr) base:myTheme(1fr 1fr)".

You can use this technique to alter layouts, hide or show elements, and even swap out copy or images.

Previously

« Typography

Up next

Colors »