CSS Grid: Shortest CSS Grid Tutorial EVER!

Last updated May 9th, 2024 at 02:57 pm

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>