Grid and Legacy Grid Examples
Grid (Gap) w/ Column Gap
Config: Grid (CSS Grid) with Column Gap
- Max Width: 1280px
- Number of Columns: 12
- Column Gap:
- SM
- 1rem (16px)
- MD
- 1.5rem (24px)
- LG
- 1.5rem (24px)
- XL
- 2rem (32px)
- Left and Right Padding:
- SM
- 1.5rem (24px)
- MD
- 2rem (32px)
- LG
- 2rem (32px)
- XL
- 0
Standard Grid resizing
Standard Grid (Wrap) resizing
Standard Grid (Centered) resizing
Rare Grid resizing
Fully customizible Grid resizing
SM:
Row 1: 6 + 6
Row 2: 3 + 3 + Offset(5) + 1
Row 1: 6 + 6
Row 2: 3 + 3 + Offset(5) + 1
MD:
Row 1: Offset(2) + 4 + Offset(2) + 1 + Offset(2) + 1
Row 2: Offset(5) + 1 + Offset(5) + 1
Row 1: Offset(2) + 4 + Offset(2) + 1 + Offset(2) + 1
Row 2: Offset(5) + 1 + Offset(5) + 1
LG:
Row 1: Centered 8
Row 2: 6 + 6
Row 3: 3 + 8
Row 1: Centered 8
Row 2: 6 + 6
Row 3: 3 + 8
XL:
Row 1: Offset(2) + 3 + Offset(2) + 3 + 2
Row 2: Centered 6
Row 3: Offset(3) + 2 + Offset(7)
Row 1: Offset(2) + 3 + Offset(2) + 3 + 2
Row 2: Centered 6
Row 3: Offset(3) + 2 + Offset(7)
Using Split classes
Grid (Current) w/ Column Gap
Grid (CSS Grid) without Column Gap (Flushed)
- Max Width: 1280px
- Number of Columns: 12
- Column Gap: 0
- Left and Right Padding: 0
Standard Grid resizing (Legacy Grid)
Standard Grid (Wrap) resizing (Legacy Grid)
Standard Grid (Centered) resizing (Legacy Grid)
Rare Grid resizing (Legacy Grid)
Fully customizible Grid resizing (Legacy Grid)
SM:
Row 1: 6 + 6
Row 2: 3 + 3 + Offset(5) + 1
Row 1: 6 + 6
Row 2: 3 + 3 + Offset(5) + 1
MD:
Row 1: Offset(2) + 4 + Offset(2) + 1 + Offset(2) + 1
Row 2: Offset(5) + 1 + Offset(5) + 1
Row 1: Offset(2) + 4 + Offset(2) + 1 + Offset(2) + 1
Row 2: Offset(5) + 1 + Offset(5) + 1
LG:
Row 1: Centered 8
Row 2: 6 + 6
Row 3: 3 + 8
Row 1: Centered 8
Row 2: 6 + 6
Row 3: 3 + 8
XL:
Row 1: Offset(2) + 3 + Offset(2) + 3 + 2
Row 2: Centered 6
Row 3: Offset(3) + 2 + Offset(7)
Row 1: Offset(2) + 3 + Offset(2) + 3 + 2
Row 2: Centered 6
Row 3: Offset(3) + 2 + Offset(7)
Using Split classes (Legacy Grid)
Grid (Gap) w/ Column Gap
Config: Grid (Flexbox) with Column Gap
- Max Width: 1280px
- Number of Columns: 12
- Column Gap:
- SM
- 1rem (16px)
- MD
- 1.5rem (24px)
- LG
- 1.5rem (24px)
- XL
- 2rem (32px)
- Left and Right Padding:
- SM
- 1.5rem (24px)
- MD
- 2rem (32px)
- LG
- 2rem (32px)
- XL
- 0
Standard Grid resizing
Standard Grid (Wrap) resizing
Standard Grid (Centered) resizing
Rare Grid resizing
Fully customizible Grid resizing
SM:
Row 1: 6 + 6
Row 2: 3 + 3 + Offset(5) + 1
Row 1: 6 + 6
Row 2: 3 + 3 + Offset(5) + 1
MD:
Row 1: Offset(2) + 4 + Offset(2) + 1 + Offset(2) + 1
Row 2: Offset(5) + 1 + Offset(5) + 1
Row 1: Offset(2) + 4 + Offset(2) + 1 + Offset(2) + 1
Row 2: Offset(5) + 1 + Offset(5) + 1
LG:
Row 1: Centered 8
Row 2: 6 + 6
Row 3: 3 + 8
Row 1: Centered 8
Row 2: 6 + 6
Row 3: 3 + 8
XL:
Row 1: Offset(2) + 3 + Offset(2) + 3 + 2
Row 2: Centered 6
Row 3: Offset(3) + 2 + Offset(7)
Row 1: Offset(2) + 3 + Offset(2) + 3 + 2
Row 2: Centered 6
Row 3: Offset(3) + 2 + Offset(7)
Using Split classes
Grid (Current) w/ Column Gap
Grid (Flexbox) without Column Gap (Flushed)
- Max Width: 1280px
- Number of Columns: 12
- Column Gap: 0
- Left and Right Padding: 0
Standard Grid resizing (Legacy Grid)
Standard Grid (Wrap) resizing (Legacy Grid)
Standard Grid (Centered) resizing (Legacy Grid)
Rare Grid resizing (Legacy Grid)
Fully customizible Grid resizing (Legacy Grid)
SM:
Row 1: 6 + 6
Row 2: 3 + 3 + Offset(5) + 1
Row 1: 6 + 6
Row 2: 3 + 3 + Offset(5) + 1
MD:
Row 1: Offset(2) + 4 + Offset(2) + 1 + Offset(2) + 1
Row 2: Offset(5) + 1 + Offset(5) + 1
Row 1: Offset(2) + 4 + Offset(2) + 1 + Offset(2) + 1
Row 2: Offset(5) + 1 + Offset(5) + 1
LG:
Row 1: Centered 8
Row 2: 6 + 6
Row 3: 3 + 8
Row 1: Centered 8
Row 2: 6 + 6
Row 3: 3 + 8
XL:
Row 1: Offset(2) + 3 + Offset(2) + 3 + 2
Row 2: Centered 6
Row 3: Offset(3) + 2 + Offset(7)
Row 1: Offset(2) + 3 + Offset(2) + 3 + 2
Row 2: Centered 6
Row 3: Offset(3) + 2 + Offset(7)