Columnizer

Type: Mixin

@include columnizer();

* You can call mixins with or without gls- namespace (e.g. @include gls-columnizer();).

Columnizer Sass mixin helps you to create evenly divided hypothetical columns in a containing element, as many as the value you pass for the $columns argument. Thus, you can show all the children inside the parent element like they are lined up in a column.

Important: Columnizer mixin must be aplied to the parent element to align the children inside of it!

Tip: This mixin is very useful when you want to create a card-based design layouts.

Github Source Code

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`	It is for orphans to fill the remaining gap at the end of the list. This argument is optional and should always be at the end. The default value is set to false.

Examples

Suppose you have a group of items like in the example below and you want to make them look lined up in columns (There are predefined style rules for items to show the differences more easily).

<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 in the .parent-element{} selector and pass a value for the number of columns.

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

//CSS Output
.parent-element {
  display: flex;
  flex-wrap: wrap;
}
.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 $gutter argument to separate every item from each other.

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

//CSS Output
.parent-element {
  display: flex;
  flex-wrap: wrap;
}
.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 true value at the end.

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

//CSS Output
.parent-element {
  display: flex;
  flex-wrap: wrap;
}
.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 $gutter or $fill arguments optionallt. But remember, the $fill argument should always be at the end.

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

//CSS Output
.parent-element {
  display: flex;
  flex-wrap: wrap;
}
.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);
  }
}

//CSS Output
.parent-element {
  display: flex;
  flex-wrap: wrap;
}
.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 > * {
    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;
  }
}