1. sds-grid

Mixin for standard grid layout.

Implementation

Much like the Flex CSS property we covered earlier, the Grid mixin is not going to be applied directly over the elements. Instead, the Grid mixin is declared on the "Parent" HTML tag of the elements to be affected.

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

//-----------
// CORRECT
//-----------

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



//-----------
// INCORRECT
//-----------

.parent {
  .column{
    @include sds-grid(2);
  }
}

sds-grid

sds-grid will probably be the most commonly used mixin related to the grid system, because it offers developers an easy and automatic way of implementing X number of columns with or without space between them. To do so, developers must use the following mixin:

@include sds-grid("columns-number", "space-between-columns");

In this case, the mixin includes two params: "columns-number" and "space-between-columns." The firs param, "columns-number," is a mandatory param and should be replaced by the number of columns the developer needs to display. The second param, "space-between-columns," is an optional param, the value of which is set to 0 by default. In the case of a developer wanting to create a specific distant between columns, they can add a new value in pixels, em, rem, etc.

A baselinesds-grid example that does not use the space-between-columns param:

.parent{
  @include sds-grid(4);
  
  .column{
    border: 1px solid sds-color(red, 80);
  }
}

This sds-grid example specifies a pixel value for additional spacing via the space-between-columns param:

.parent{
  @include sds-grid(4, 12px);
}

Instead of using static pixel values for the space-between-columns parameter, we recommend using the sds-spc function inside the sds-grid mixin. The following example illustrates this method.

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