Simple Grid System
At this point, grids can be created on the go using CSS Flexbox or Grid systems. So we believe that depending on / or creating grids that rely on predefined class names, is overkill.
Instead, we created a utility for creating simpler grids, that works with the combination of Flexbox and CSS variables.
This is all the SCSS that it needs.
// Flex grid
.f-row {
// --i-gap, --i-cols, --i-mb should be passed as inline variables to f-row
--cols: var(--i-cols, 2);
--gap: var(--i-gap, 0);
--mb: var(--i-mb, var(--gap));
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: calc(100% + var(--gap) * 1px);
margin-left: calc(var(--gap) * -0.5px);
margin-bottom: calc(var(--mb) * -1px);
.col {
width: calc((100% - (var(--gap) * var(--cols)) * 1px) / var(--cols));
margin-bottom: calc(var(--mb) * 1px);
margin-left: calc(var(--gap) * 0.5px);
margin-right: calc(var(--gap) * 0.5px);
}
}It works great as a helper for creating regular grids (multiple columns of the same size).
Here are a few examples.
Regular Grid Examples
1
2
3
4
5
6
<div
class="f-row"
style="--i-cols: 3; --i-gap: 15"
>
<div class="col">
<div class="element-class-name">1</div>
</div>
<div class="col">
<div class="element-class-name">2</div>
</div>
<!-- ... -->
<div class="col">
<div class="element-class-name">6</div>
</div>
</div><!-- f-row -->Different Vertical Gap
1
2
3
4
5
6
<div
class="f-row"
style="--i-cols: 3; --i-gap: 10; --i-mb: 30"
>
<div class="col">
<div class="element-class-name">1</div>
</div>
<div class="col">
<div class="element-class-name">2</div>
</div>
<!-- ... -->
<div class="col">
<div class="element-class-name">6</div>
</div>
</div><!-- f-row -->Responsiveness
1
2
3
4
5
6
7
8
<div
class="f-row f-row--responsive-example"
style="--i-cols: 4; --i-gap: 20"
>
<div class="col">
<div class="element-class-name">1</div>
</div>
<div class="col">
<div class="element-class-name">2</div>
</div>
<!-- ... -->
<div class="col">
<div class="element-class-name">8</div>
</div>
</div><!-- f-row -->@media (max-width: 991px) {
.f-row--responsive-example {
--cols: 2;
--gap: 10;
}
}
@media (max-width: 600px) {
.f-row--responsive-example {
--cols: 1;
}
}Note how we are not overwriting the variables that we passed to the inline style of the .f-row element.
We are overwriting the --cols: and --gap: instead of --i-cols: and --i-gap: to avoid using !important.