3. sds-grid-column()

A SCSS mixin to control the layout of elements within a Grid container.

For more advanced control, you can define where elements/sections start and end. The sds-grid-column() mixin can be used for this.

In order for this mixin to work properly, sds-grid or sds-custom-grid must already be applied to the parent container of the element(s) being targeted. It is also necessary to understand how grid lines and grid tracks work in CSS Grid.

@include sds-grid-column($start, $end);

Specifying the $start parameter controls which grid line the element starts at, and the $end parameter controls where that element should end. Unlike the sds-grid() and sds-custom-grid mixins where the parent container is targeted, this sds-grid-column() mixin is meant to be applied to children element(s) within a grid container.

Example:

The desired outcome is to have a layout with three uniform sections, with a fourth section displayed directly under those first three. To avoid a large gap of whitespace, this fourth section should fill 100% of the available width. Given the following structure:

<div class="parent">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section stretch"></div>
</div>

First, set the parent to a grid container using either sds-grid() or sds-custom-grid() mixins (the following example uses the basic sds-grid() ). Since the layout requires three uniform sections or columns, the mixin would look something like this:

.parent {
  @include sds-grid(3, sds-spc(8));
}

which results in the layout below.

Basic rendering of CSS Grid using Sipster's sds-grid() mixin.

Based on the values declared in the mixin example above, the current grid structure is outlined be in the diagram below. The numbers represent the track lines, which identify the scope and bounds of the grid.

Visualizing CSS Grid track lines and grid tracks.

With this knowledge, we can apply the sds-grid-column() mixin to control the section that needs to stretch 100% of the available grid. In CSS Grid terms using the diagram above, the fourth section needs to start at grid line 1 and end at grid line 4.

.parent {
  @include sds-grid(3, sds-spc(8);
  
  .section.stretch {
    @include sds-grid-column(1, 4);
  }
}

This results in the layout below, and meets the original layout requirements of three uniform sections followed by a fourth section underneath that fills 100% of the grid.

Although this is a very basic example, it is a good representation of how the various SDS mixins can be combined to achieve flexible and responsive layouts.

---

Resetting sds-grid-column to its default value

There may be times where a layout requires custom control like in the example above, but only needs this behavior at larger breakpoints. For the smaller breakpoints, the layout needs to follow the standard Grid layout and behavior. To accommodate this, Sipster provides the sds-grid-column-reset() mixin, which also should be applied to children elements of a parent Grid container. This can be achieved by using sds-grid-column-reset() in combination with the sds-screen() mixin, as shown below.

.parent {
  @include sds-grid(3, sds-spc(8);
  
  // @md grid-range
  @include sds-screen(md){
    @include sds-grid(2, 0);
  }
  
  .column.variant {
    @include sds-grid-column(1, 4);
    
    // @md grid-range
    @include sds-screen(md){
      @include sds-grid-column-reset;
    }
  }
}