Hydrogen enhances standard CSS layout by introducing a new unit called vertical rhythm multipliers. While Hydrogen attributes will accept standard CSS units like
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.
x1 : (line-height x 1) x2 : (line-height x 2) x3 : (line-height x 4) ...
By using multipliers to apply whitespace (
gap, etc.), your interface creates a harmony and sustained rhythm with your typography, even across media queries.
<p data-h2-padding="base(x2 x1)"></p> <p data-h2-margin-top="base(x3)"></p> <p data-h2-gap="base(x1.5)"></p>
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.
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.
<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>
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.
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
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.
<div data-h2-flex-grid="base(alignment, column-gap, row-gap)"> children </div>
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:
Xis the width you want the item span, and
Yis 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.
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.
<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>
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.