AUTOMATIC.CSS Auto GRID Utility Classes (Automatically Responsive Grids)

Oct 14th, 20212 min

Kevin Geary

While Automatic.css offers full manual grid utility classes complete with column spans, row spans, column starts, and row starts, it's the ONLY utility class system to offer Auto Grids –– automatically responsive grids that don't require any mobile utility classes or span adjustments.

All the following Auto Grids are offered:

2 column
3 column
4 column
5 column
6 column
1-2 staggered
1-3 staggered
2-1 staggered
2-3 staggered
3-1 staggered
3-2 staggered

You define the grid structure on desktop and Automatic.css takes care of the mobile responsiveness for you.

In this tutorial I show you how auto grids work while also showing you how they compare to traditional grids. I also explain when you should use traditional grids and when you should use auto grids.

Automatic.css is currently available only in my Inner Circle –– https://digitalambition.co/inner-circle/

You can learn more at https://automaticcss.com

We're working on a plugin that should be ready in October/Nov. Inner Circle members will get an unbeatable LTD offer and then it'll be made publicly available once that private launch has ended.

0:00 Intro
0:57 Traditional Grids in Automatic.css
4:32 Traditional Staggered Grid in Automatic.css
7:35 Auto Grids
12:05 Auto Staggered Grids
14:00 When to Use Auto Grids