Learn CSS Grid in the syntax you'll actually use
Universal foundation - works everywhere
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Modern utility-first framework
<div class="grid grid-cols-3 gap-4">
<!-- items -->
</div>
Style objects for React & Vue
const style = {
display: 'grid',
gridTemplateColumns: '1fr 1fr'
}
Powerful CSS preprocessor
$cols: 3;
.grid {
display: grid;
grid-template-columns: repeat($cols, 1fr);
}
Already know CSS Grid? Just want to use the generator?
Skip to Generator →💡 Recommendation: Start with Pure CSS to learn the fundamentals, then explore framework-specific courses later.
More courses launching soon! Each course is completely separate with its own lessons and game.