Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0* You can call mixins with or without the gls- namespace (e.g. @include gls-columnizer();).
The Columnizer Sass mixin helps you create evenly divided hypothetical columns inside a container element, as many as the value you pass for the $columns argument. This lets you show all the children of the parent element as if they were lined up in columns.
Important: The Columnizer mixin must be applied to the parent element to align the children inside it!
Tip: This mixin is very useful when you want to create card-based design layouts.
Arguments
| Name | Type | Description |
|---|---|---|
$columns | number | Sets the number of the hypothetical columns. A number without a unit, or var(), env() or attr(). |
$gutter | number (with unit) | Sets the value of the space between the columns. A length, a percentage, var() or a maths function. 0 is written as 0px, because the gutter is multiplied inside calc(). |
$fill | boolean | Lets the orphans fill the remaining gap at the end of the list. This argument is optional and should always come last. The default value is false. |
Examples
<div class="parent-element">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
<div class="item">05</div>
<div class="item">06</div>
<div class="item">07</div>
<div class="item">08</div>
</div>Now let's get cracking. Just call the mixin inside the .parent-element{} selector and pass a value for the number of columns.
.parent-element{
@include columnizer(3);
}.parent-element {
display: flex;
flex-wrap: wrap;
}
.parent-element, .parent-element::before, .parent-element::after,
.parent-element *,
.parent-element *::before,
.parent-element *::after {
box-sizing: border-box;
}
.parent-element > * {
flex: 0 0 calc(100% / 3);
margin-bottom: 0;
}
.parent-element > *:not(:last-child) {
margin-right: 0;
}Let's pass a value for the $gutter argument to put space between the items.
.parent-element{
@include columnizer(3, 20px);
}.parent-element {
display: flex;
flex-wrap: wrap;
}
.parent-element, .parent-element::before, .parent-element::after,
.parent-element *,
.parent-element *::before,
.parent-element *::after {
box-sizing: border-box;
}
.parent-element > * {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc((100% - (3 - 1) * 20px) / 3);
margin-bottom: 20px;
}
.parent-element > *:not(:last-child) {
margin-right: 20px;
}
.parent-element > *:nth-child(3n) {
margin-right: 0;
}To make the orphans fill the gap, let's pass the true value at the end.
.parent-element{
@include columnizer(3, 20px, true);
}.parent-element {
display: flex;
flex-wrap: wrap;
}
.parent-element, .parent-element::before, .parent-element::after,
.parent-element *,
.parent-element *::before,
.parent-element *::after {
box-sizing: border-box;
}
.parent-element > * {
flex-grow: 1;
flex-shrink: 0;
flex-basis: calc((100% - (3 - 1) * 20px) / 3);
margin-bottom: 20px;
}
.parent-element > *:not(:last-child) {
margin-right: 20px;
}
.parent-element > *:nth-child(3n) {
margin-right: 0;
}You can use either the $gutter or the $fill argument optionally. But remember, the $fill argument should always come last.
.parent-element{
@include columnizer(3, true);
}.parent-element {
display: flex;
flex-wrap: wrap;
}
.parent-element, .parent-element::before, .parent-element::after,
.parent-element *,
.parent-element *::before,
.parent-element *::after {
box-sizing: border-box;
}
.parent-element > * {
flex-grow: 1;
flex-shrink: 0;
flex-basis: calc(100% / 3);
margin-bottom: 0;
}
.parent-element > *:not(:last-child) {
margin-right: 0;
}Now let's try it with the breakpoint mixin to show you how these mixins work harmoniously together.
.parent-element{
@include columnizer(2, 10px, true);
@include breakpoint(min, large) {
@include columnizer(4, 20px, false);
}
}.parent-element {
display: flex;
flex-wrap: wrap;
}
.parent-element, .parent-element::before, .parent-element::after,
.parent-element *,
.parent-element *::before,
.parent-element *::after {
box-sizing: border-box;
}
.parent-element > * {
flex-grow: 1;
flex-shrink: 0;
flex-basis: calc((100% - (2 - 1) * 10px) / 2);
margin-bottom: 10px;
}
.parent-element > *:not(:last-child) {
margin-right: 10px;
}
.parent-element > *:nth-child(2n) {
margin-right: 0;
}
@media (min-width: 992px) {
.parent-element {
display: flex;
flex-wrap: wrap;
}
.parent-element, .parent-element::before, .parent-element::after,
.parent-element *,
.parent-element *::before,
.parent-element *::after {
box-sizing: border-box;
}
.parent-element > * {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc((100% - (4 - 1) * 20px) / 4);
margin-bottom: 20px;
}
.parent-element > *:not(:last-child) {
margin-right: 20px;
}
.parent-element > *:nth-child(4n) {
margin-right: 0;
}
}What it refuses
A column count or gutter the browser drops stops the build. Measured in Chrome 152, calc(100% / 3px) drops the column width, and so does a gutter that is unitless, a word, or a unit that is not a length. Until 2.3.1 these compiled. A gutter of 0 used to be one of them, (3 - 1) * 0 being a number rather than a length, and is now written as 0px.
.grid {
@include columnizer(3px);
}Error: `3px` is not a valid column count for `columnizer`: a column count has no unit. A browser drops the column width.