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
Adjust any grid props, whatever you like from column size to gutters and columns amount. You don't need to thing about…
And the project on Github
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…
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-16 which means that the top margin for the element will be 16 pixels.
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
- and another class to shift columns, for example
$name standing for breakpoint name
$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
@mixin grid-base. The last mixin is the mixin for two classes —
.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
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.