If you haven’t messed with it, yet…
CSS Grid is pretty handy.
Take this HTML, for example:
<div class="wrapper"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>
We can easily create a grid like this:
.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 10px; }
That’ll give you a grid that looks something like this:
And, you can do even more complex layouts like this:
With just a few lines of code.
Again, pretty handy.
Anyway, one of the things I immediately wanted to do was build a Bootstrap-like grid system using CSS Grid. So, I did… and I put it into its own CSS file that I just drag and drop into my different projects.
Would you like that code for yourself?
Well, it’s inside my NEW web design course over on SkillShare. There’s a full lesson on HOW to build the grid if you want to build your own AND, you get access to the full source code I used, so you’ll also get the exact grid I built.
And, of course, there’s a ton more you’ll learn in the course…
Like submitting forms via AJAX.
Building a rotating mobile menu with CSS transitions.
Sending emails with PHP
And, more.
Anyway, link to get the course at NO cost is here: https://skl.sh/2xM6Y3l
Enjoy!
John