Gerillass: Columnizer Sass Mixin

Columnizer

Type: Mixin

@include columnizer();

* 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!

Arguments

Name	Type	Description
`$columns`	number	Sets the number of the hypothetical columns.
`$gutter`	number (with unit)	Sets the value of the space between the columns.
`$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

HTML

<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.

Sass

.parent-element{
  @include columnizer(3);
}

CSS

.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;
}

Result

Let's pass a value for the $gutter argument to put space between the items.

Sass

.parent-element{
  @include columnizer(3, 20px);
}

CSS

.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;
}

Result

To make the orphans fill the gap, let's pass the true value at the end.

Sass

.parent-element{
  @include columnizer(3, 20px, true);
}

CSS

.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;
}

Result

You can use either the $gutter or the $fill argument optionally. But remember, the $fill argument should always come last.

Sass

.parent-element{
  @include columnizer(3, true);
}

CSS

.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;
}

Result

Now let's try it with the breakpoint mixin to show you how these mixins work harmoniously together.

Sass

.parent-element{
  @include columnizer(2, 10px, true);
  @include breakpoint(min, large) {
    @include columnizer(4, 20px, false);
  }
}

CSS

.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;
  }
}

Result

Columnizer

Arguments

Examples

Related Links

Do you want to join our Slack group?