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

Column1
Column 2
<div class="grid grid-20-80 gap-1">
<div
class="txt-center"
style="border: 1px solid var(--bg-primary)"
>
Column1
</div>
<div
class="txt-center"
style="border: 1px solid var(--bg-primary)"
>
Column 2
</div>
</div>
view raw grid-20-80.html hosted with ❤ by GitHub

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.

Column1
Column 2
<div class="grid grid-50-50 gap-1">
<div
class="txt-center"
style="border: 1px solid var(--bg-primary)"
>
Column1
</div>
<div
class="txt-center"
style="border: 1px solid var(--bg-primary)"
>
Column 2
</div>
</div>
view raw grid-50-50.html hosted with ❤ by GitHub

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.

Column1
Column 2
Column 3
<div class="grid grid-three-column gap-y-1 gap-x-1">
<div class="txt-center"
style="border: 1px solid var(--bg-primary)">
Column1
</div>
<div class="txt-center"
style="border: 1px solid var(--bg-primary)">
Column 2
</div>
<div class="txt-center"
style="border: 1px solid var(--bg-primary)">
Column 3
</div>
</div>
view raw grid-three-column.html hosted with ❤ by GitHub
Froms Image