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:
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.