2. sds-custom-grid

Mixin for custom grid layout.

When developers don't want to generate a standard layout grid with fixed-width columns, the sds-custom-grid mixin is the best solution. It works similar to the sds-grid mixin, but, rather than declaring a value for the number of columns needed, the developer manually identifies the number of columns with their width defined by fraction (fr) units.

<div class="parent">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

.parent {
  @include sds-custom-grid(2fr 1fr 1fr);
}

Also, there is an additional, optional param of grid spacing available in this mixin.

.parent {
  @include sds-custom-grid(2fr 1fr 1fr, sds-spc(12) );
}