Grid

Use grid layout with .grid & .col class. Grid uses 12 column system.

By default element with .col class will span across 12 columns. Use .col-span_number (e.g., .col-4) class to span across multiple columns. In .col-span_number span_number can be any number from 1 to 12.

Gap

Give space between rows with .row-gap-space_count (e.g., .row-gap-1) & Similarly apply space between columns with .col-gap-space_count (e.g., .col-gap-1). space_count can be any number from 1 to 4 where

• 1 = 0.5rem
• 2 = 1rem
• 3 = 1.5rem
• 4 = 2rem

Use .gap-space_count class (e.g., .gap-1) to apply space between row & column with a single class.

Responsive Grid

Change column span according to screen size.

Grid supports five responsive breakpoints (xs, sm, md, lg, xl). Breakpoints are based on min-width media queries, meaning they affect that breakpoint and all those above it (e.g., .col-sm-4 applies to sm, md, lg, xl). This means you can control container and column sizing and behavior by each breakpoint.