Creating a CSS Grid system
Using CSS Grid properties and Scss features, I developed a simple, responsive grid system. Here’s how you can too!
Since I regularly use Bootstrap and Flex in my day-to-day work, I’ve never found a use case for experimenting with CSS Grid. Adding it alongside the Bootstrap Framework would certainly be overkill.
Alongside wanting to learn CSS Grid, understanding how to utilise the features of Scss effectively has been high on my list.
To experiment with both, I updated my portfolio website to bring some personality back into. This was the perfect opportunity to learn CCS Grid and Scss as with the size of my portfolio website and the actual number of components it has, other CSS frameworks would have excessive.
In fact, I loved playing with the possibilities of CSS Grid properties and Scss so much that I developed a simple, responsive grid system.
The first iteration of my CSS Grid was simple and focused on the ability to specify the number of columns a column would span. However, as I began considering how others might utilise the grid, I expanded its functionality by incorporating the ability to offset columns, thereby creating further flexibility when creating layouts.
To increase flexibility further, I implemented the ability define various column spans and offsets according to specified breakpoints.
The final addition I implemented was adding the ability to set text alignments based on the defined breakpoints.
Using Scss, I utilised features such as defining variables and mixins, nesting selectors, performing calculations, and applying flow control rules. All of this helped in reducing duplication in my code, making it quicker and easier to maintain and for others to adopt.
In summary, the grid system provides:
- the flexibility to adjust the number of columns in the grid (by default this is set to 12 through the $grid-columns variable).
- the ability to specify the number of columns a column will span and to set offsets on columns. These can be configured for each breakpoint (xl, lg, md, sm).
- the flexibility to modify the breakpoints by adjusting the widths inside the variables.scss file.
- the ability to set text alignments based on breakpoints for left, right and center text alignments.
Take a look at my code, and feel free to use and adapt it in your next project!
Previous versions
CSS Grid: V1 — Column spans and offsets are adjusted automatically for smaller screens using @media queries at defined breakpoints rather than being able to manually define them.
📝 Edit CSS Grid: V1 on Codepen
