Basic Grid 2.0

SCSS-based grid system utilizing CSS grid over floats.

Basic Grod 2.0

Introduction

Basic Grid 1.0 was a success for me. I had walked away not only with a more lean and solid system for me to build web layouts on, but also felt that I had mastered SCSS.

Then CSS Grid came along...and quickly grew into the new standard.

While I know there’s been debate on using the old logic of floats and margins, or flexbox, or CSS Grid, I wanted to learn the new standard and perhaps update this framework to utilize it. While I’m thrilled I did learn CSS Grid and managed to make an update to Basic Grid, I’m not certain if frameworks like this are the way to go anymore.

Development

My first intention was to build a system that worked exactly or close to what Basic Grid 1.0 would do. To have a simple system where those fluent in Bootstrap could pick it up and go with it, but now have their layouts powered by CSS Grid. Immediately I ran into difficulties, because CSS Grid works much differently (and better in my opinion), so I had to think differently.

Creating the grid areas by having them span columns ended up being inefficient, as it could cause problems when one wanted to change column ordering, or even offset columns. Setting grid-column to span a number doesn’t allow one to do those added functions, as we cannot use margin when positioning things in a CSS Grid.

The solution was to rethink how the CSS classes should work, thus making a syntax allowing for a breakpoint, starting column, and ending column:

.col-[breakpoint]-[starting column]-[ending column]

Now I wanted to make this simple and easy on those who might use this system, but have no interest or time to really learn CSS Grid. I set up the SCSS functions to create the individual classes where instead of speaking in terms of starting and end points, the numbers speak of the actual columns. So if you wanted one div to span the first three columns and the second to span the next four, it would be like this:

.col-[breakpoint]-1-3   .col-[breakpoint]-4-7

Now I know in actual CSS Grid the first div would have a grid column of 1 / 4 and the second a grid column of 4 / 8, using the “gaps” in between columns as the markers, but I wanted this system to be less confusing to one who is used to using Bootstrap, where you’re more thinking of the actual columns you’re covering.

Results and Takeaways

The end result is a decent CSS grid framework if one wants to quickly prototype a site with CSS Grid, or if they truly want to use it as a backbone for a site without really learning CSS Grid, but I’ll be honest and say I would never use this. Call it “opening Pandora’s Box”, but once I learned all I could do with CSS Grid, it really made frameworks like this obsolete in my eyes.

Basic Grid 2.0 does what I set it to do, be a simple grid system for layout, but it misses out on so many cool features that one can get with using CSS Grid in its entirety. I’d probably tell many devout Bootstrap users to just visit Grid by Example and become one of the converted before seeking a simple framework to do it all with CSS Grid.

I’m still going to explore trying to update Basic Grid 1.0 with Flexbox, mainly to see what the pros and cons of each option in layout can bring, but like I did on this site, I’m more eager to just make my own grids and not bring in a framework.