2. sds-custom-grid()

A SCSS mixin that provides flexible column control of a CSS Grid container.

There may be times where a layout requires more asymmetrical regions or columns, and the basic grid with evenly sized/distributed elements will not suffice. To accommodate this, Sipster provides the sds-custom-grid() mixin.

@include sds-grid($columns..., $gap);

This works similar to the basic sds-grid() mixin, but rather than the $columns parameter representing the number of desired columns, each desired column and width needs to be manually specified. The following example illustrates this.

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

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

Using sds-custom-grid() to create an asymmetrical 3 column layout

The common measurement units like px, rem, percentage, etc can be used to control each column's width, but you can also use Fractional Units(fr). These fr units essentially turn a column into a flex column by specifying the size of a track as a fraction of the available space in the grid container.

Just like with the basic sds-grid() mixin, this sds-custom-grid() mixin also accepts an optional $gap parameter that controls the space between columns:

.parent {
  @include sds-custom-grid(50% 1fr 1fr, sds-spc(8));
}

Using the optional $gap parameter to add even spacing between columns

which compiles to:

.parent {
  display: grid;
  grid-template-columns: 50% 1fr 1fr;
  grid-gap: 0.5rem;
}