Grid

A two-dimensional layout system that lets you lay content out in rows and columns

Usage

Add grid-* class to an element where grid class is located.

<div class="grid grid-3-columns">
    // Your content
</div>

Classes

ClassValue
grid
grid-auto-flow-column
grid-auto-flow-row
grid-{1 to 12}-columns
grid-{1 to 12}-rows
grid-column-start-{1 to 12}
grid-column-end-{1 to 12}
grid-column-span-{1 to 12}
grid-row-start-{1 to 12}
grid-row-end-{1 to 12}
grid-row-span-{1 to 12}
 

Add @s, @m, or @l suffix to support breakpoints