https://www.youtube.com/watch?v=a9SnX7MPajk

Benefits

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Mobile first approach

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Globally adjust layouts

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Span items across columns and rows

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Maintain even column widths

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Compatible with any column count

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Reduce bloated code

</aside>

How to Apply

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Add gd1 in the class name to apply a 1 column grid

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Apply a column count for the grid (i.e. column tablet 3) Column count will also apply to larger breakpoints unless overridden.

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Apply a column count for a different breakpoint if needed (i.e. column landscape 2)

</aside>