The Goal
I'm working on a flexbox + calc() based grid system with gutters in SASS.
You define your grid via mixins like so:
.box {
@include column('1/3', $gutter: 20px);
}
Compiled this will be:
.box {
width: calc(99.999999% * 1/3 - 13.33333px);
}
The Problem (please read the updates further down)
I'm trying to find a way get rid of the classic .row containers.
In my mind this should be super simple with flexbox + calc() but I have this strange bug (or an error in my caculations?) which sometimes break the layout when multiple rows should be created.
As an example:
I want a grid with a 20px gutter between the columns.
The rest is best explained in code, so here's a pen:
http://codepen.io/NilsDannemann/pen/OMBVry?editors=1100
Why is the last example (1/8 - multi row) breaking?
Update #1
Okay, heres whats happening: the Problem is not rooted in the flexbox space-between property, but comes from flexbox' behavior in general.
Flexbox always sees the gutters as available space. So in the last example it combines them (7 * 20px = 140px) and concludes that there is enough space to fit another item (width after calc() = 107.5px) on the first row.
This is were the whole thing falls.
space-betweenthen does it's job as intended.
Update #2
I think the only way around that is (as @Siguza pointed out) to add margins to fill the gutters. Then use an :nth-child selector to set the last margin of a row to 0.
In SASS this would look something like this:
.box {
@include column('1/8', $gutter: 20px);
margin-right: 20px;
&:nth-child(8n) {
margin-right: 0;
}
}
Now it becomes a SASS challenge:
How do I get the :nth-child (whole number) from the passed fraction?
With some effort I have solved this. :-)
Heres the pen with the current SASS version of the grid:
http://codepen.io/NilsDannemann/pen/OMaOvX?editors=1100
Wow! This works great!
A multi-column grid with a completely clean DOM!
No .row classes or .eigth classes. Feel free to play around with the mixin (change the fraction or the gutter).
Heres the sad part though:
Try uneven grids like this:
.box1 {
@include column('2/8', $gutter: 20px);;
}
.box2 {
@include column('4/8', $gutter: 20px);;
}
.box3 {
@include column('2/8', $gutter: 20px);;
}
Now the :nth-child is wrong and the whole thing breaks. :-(
If we can solve this (without introducing another variable to the mixin) we would have one of the cleanest any intuitive grids I have seen to date. But this last problem is a tough one.
I'm not sure if it can be done at all.
Any SASS-Genius out there to help?
