Grid
CSS Grid is a two-dimensional grid system used to work on the layout of UI elements and segments of a webpage. The Grid comprises horizontal and vertical lines to form rows and columns, much like a table.
Hydrogen provides four types of grid layouts. Hydrogen grid layouts are mobile first and responsive.
Grid 20-80 layout
If you want to use any container as grid add
.grid class to the container first. To divide the
container into 20-80 percent column use
.grid-20-80 class on your grid container. You can
use .gap-1 class to add gap of 1rem
Grid 50-50 layout
The most used grid layout of two equal columns. You can use
.grid-50-50 class to create two column grid
layout.
Grid three column layout
Another useful grid layout is three equal column layout. Use
.grid-three-column class to create three column
layout. You can use .gap-x-1 to add grid gap
horizontally and .gap-y-1 to add grip gap
vertically.