Last updated January 30th, 2022 at 10:14 am
I’ve been a reluctant/late adapter of the Flexbox and CSS Grid layout systems. I’m not proud of that, but it is what it is. After reading and watching a boatload of tutorials and videos on these systems, I got the idea that I should dive into Flexbox first — and I did.
But then I happened upon an excellent YouTube video by Kevin Powell in which he makes the convincing case that — even though CSS Grid had a lot going on and can seem like a monster — it’s actually the easier of the two systems to get started with.
In the space of under 7 minutes, Kevin made me a convert, and I immediately dove into implementing CSS Grid into a couple of custom Web applications I built years ago.
I then felt challenged to create this video tutorial, with the click-baity title of “Shortest CSS Grid Tutorial EVER!”.
If this helps anyone, I’d love to know it.
And here’s the CSS to copy/paste:
<style> .container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1em; } .container > div { padding: .25em .5em; border: 2px solid #ddd; box-shadow: 1px 1px 4px 1px #ddd; } </style>
Leave a Reply