Use Tailwind's grid utility classes to build the same CSS Grid layouts, explained step by step, with hands-on practice at every stage.
0 of 9 lessons completed
Each level builds on the last: start with the grid utility fundamentals, move on to real layouts, then finish with advanced, responsive techniques. All three levels are ready, start with Lesson 1 below.
What Tailwind's grid system is, how the grid-cols and grid-rows utilities work, and your first simple layouts.
Build actual page layouts with Tailwind's grid classes and learn to spot and fix common mistakes.
Responsive grid utilities, arbitrary values and auto-placement.
Start with Lesson 1, or explore the tools first if you would rather experiment.