3. sds-grid-column

Advance usage of columns with Grid system in Sipster-Core.

For more advanced implementation of the Grid properties, developers can define where they want a specific column/element to start and end. To do so, they need to use the following mixin:

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

This mixin, unlike the sds-grid and sds-custom-grid, will not be applied on the "Parent" element, but rather directly over the "Child" element the developer wants to affect.

Another important element to keep in mind is that, in order to use this mixin, you must already have applied a grid layout using sds-grid or sds-custom-grid.

To understand this better, let's make a simple example:

The goal is to have a structure formed by three uniform columns, with a fourth "Child" element displaying in a different row. To avoid a large blank space, this last element needs to cover the full space remaining, not just the space of one column.

Let's see first the default behavior:

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

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

Now, to apply the sds-grid-column mixin, it is necessary to know how Grid CSS system enumerates the columns spaces. In this case, the enumeration can be seen in the following image:

Knowing that, let's apply the sds-grid-column mixin:

.parent {
  @include sds-grid(3, sds-spc(12);
  
  .column.variant {
    @include sds-grid-column(1, 4);
  }
}

Resetting sds-grid-column to its default value

Imagine a scenario where the developer wants an element to act like in the example above, but only in the desktop view. For tablet and mobile views, it is necessary for the element to have its standard behavior. To make this change, the developer can use the sds-grid-column-reset mixin over the element inside a screen breakpoint. This will return the element to its default behavior again.

.parent {
  @include sds-grid(3, sds-spc(12);
  
  // @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;
    }
  }
}