Sass Grid System - Implementing gutters - css

Question

I am trying to implement gutters for the following code(https://www.sassmeister.com/gist/eca78ee1435202c7e7dcaecc57c75bd5):
// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.6.2)
// ----
//Variable Declarations
$__grid--columns:12;
$__grid--breakpoints: (
'xxxsmall': 375px,
'xxsmall': 480px,
'xsmall': 667px,
'small': 768px,
'medium': 960px,
'large': 1024px,
'xlarge': 1200px,
'xxlarge': 1400px,
'xxxlarge': 1600px,
);
$__grid--gutters: (
'small': 30px,
'medium': 30px,
'large': 30px
);
$__grid--cell-containers: (
'small': 1200px,
'medium': 1400px,
'large': 1600px,
'full': 100%
);
//Mixins for Grid
// #mixin createGutters() {
// .element {
// #if map-has-key($__grid--gutters, '') {
// content: 'Key Found';
// } #else {
// content: 'Key Not Found';
// }
// }
// }
#mixin createCells() {
#each $key, $value in $__grid--breakpoints {
#media screen and (min-width:$value){
#for $i from 1 through $__grid--columns {
&.#{$key}-#{$i}{
#if map-has-key($__grid--gutters, $key) {
margin-left:map-get($__grid--gutters, $key);
}
width:((100% / $__grid--columns) * $i);
}
}
}
}
}
//Spit out the cells
.row {
display:flex;
flex-wrap:wrap;
}
.cell {
// #include createGutters;
#include createCells;
}
//Styles not needed for grid
// * {
// box-sizing:border-box;
// }
// .color {
// padding:10px;
// background-color:salmon;
// }
As you can see I have a sass map for the gutters. I am trying to keep this as simple as possible. I'm not sure if I should be using an each loop, or a map-get() function, or maybe something else. I also want to have the margins on the left. I have to consider that if their are too many columns they will drop to the next line.
So basically if I set the margin of the first element to 0, and I have 4 columns that will fit within the container, the 5th item onward on will drop to the next line. The problem is that the margin on the 5th item will still be there.
This is a representation of what I mean:
item---item---item---item
---item---item---item---item
---item---item---item---item
So is there a way to:
Implement my sass map in a succinct way?
Add in support for if the items break to the next line for the margin
Better way to do this process? If so, feel free to fork the sassmeister code.

Answer 1

Your questions contains several points so I will try to answer them in an order that, think, will work better.
Normally purpose of the grid system (or columns system, to name it better to avoid names collision with CSS Grid specification) is to simplify elements positioning by providing ability for elements to take space of one or multiple "columns" defined by the grid. This definition means that columns can't wrap, so your flex-wrap: wrap breaks whole idea of columns system.
Your column width math width:((100% / $__grid--columns) * $i); does not include the fact that grid consists not just of columns, but also of gutters between them. Usually gutters are available only between columns so for 12-columns grid you need to have 11 gutters of defined size. It means that your actual math for grid column width should use calc() expression and it actual math will look like: width: calc(#{100% / $__grid--columns * $i} - #{$gutter-size / $__grid--columns * ($__grid--columns - $i)}); where $gutter-size is current gutter size. I've prepared a CodePen example to demonstrate this math.
If you want your grids to be even better - it is worth to let grid maths to be performed by dedicated library. Try to use Susy 3 for this purpose and your result will became much better.