Flex-box Grid System with SCSS. Old but gold.

I know that the last two years everyone’s talking about grid layout. And I also have an article about it but I’ve faced with the project where I didn’t have a chance to use the full power of “evergreen browsers” and flex-box was the only way.

So, today I just want to share my experience and describe how did I make a grid system on Flexbox.

The demo is here:

Tiny Flexbox Grid System

And the project on Github

PavelLaptev/tiny-flexbox-grid-system

This system close to the Functional CSS — when you describe/build the layout behavior not in CSS as a single class or classes but doing many tiny classes like margin-top-8 or margin-top-16 which means that the top margin for the element will be 16 pixels.

Why SASS

Actually, it doesn’t matter will it be SASS or Stylus. What is the matter here is to use preprocessors, because it allows us to use functions, loops, and maths. I choose SASS because is more popular.

Step 1. Grid variables

Our first lines in *.scss will be a set of variables.

There we have our variables in fixed units which we will convert into percentage units for flexibly later. We percentage units from the beginning because we grab our units from Figma app and they are in pixels. Also, it's more convenient to use pixel units and convert them after, because you don’t need to convert them by your self.

Step 2. Convert PX to %

Then we need to convert these variables into percentage units.

For the grid wrapper, we will use this formula:

And for gutter (space between columns) this formula:

Step 3. Functions and mixins

Now we need to prepare some functions and mixins to reduce code duplicates.

col-width function. The first function for columns width —there we pass two arguments:

• $i — there we will pass the current number from the loop function for each column, like: from 1 to 1, from 1 to 2, from 1 to 3, from 1 to 4, from 1 to 5, etc. So, we will have values like 10%, 20%, 30%, etc.
• $columns — there we pass the number of columns. For each breakpoint it’s different.

@mixin col-props. Then, mixin with all column properties. And we made col-width function separate from this one because we will use it later in another mixin.

As you can see we divide $gutter by 2.

@mixin columns-loop. And the loop function where we create two classes

• for columns, the generated name will be for example -desk-12 or -tab-12
• and another class to shift columns, for example -desk-shift-12

there $name standing for breakpoint name desktop, tablet and mobile. $i is for columns range, like 12 for instance which means from the first column to the twelfth.

And if we want to shift a column we will make it with margin-left property.

@mixin grid-base. The last mixin is the mixin for two classes — .grid and .grid-0 class. That is why we have the width property here as an argument. For both these classes, we will have a different width.

Step 4. Classes

So, all variables, mixins, and functions prepared. And not the easiest part — gather all this stuff together in two classes .grid and .col

It seems a little confusing that instead of plan CSS we have so many functions and mixins but in the future when we want to change something it saves us a lot of time.

The whole code with variables and mixins is only 105 lines.

And compiled code is 312 lines

Thank you for reading :-) I hope it was helpful with this article I wanted to show how we can make routine work easier and don’t repeat yourself in the code.

The Tiny Flexbox Grid System