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
