---
description: Mixin for standard grid layout.
---

# 1. sds-grid

### 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.

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

```scss
//-----------
// 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:

```css
@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 baseline`sds-grid` example that does not use the `space-between-columns` param:

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

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_703CkzPx9rque70Qj%2F-MdcCMNY4KuuiYpbmjP7%2F-MdcDPyG5ETzK5ioBaQx%2Fimage.png?alt=media\&token=f098e285-c840-4134-9bc9-d02be08c2ce7)

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

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

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_703CkzPx9rque70Qj%2F-MdcCMNY4KuuiYpbmjP7%2F-MdcDh_r_zlywmT9aNGA%2Fimage.png?alt=media\&token=56559fc8-8a4f-4cd8-9bdc-9b44b94ad3a8)

{% hint style="info" %}
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.
{% endhint %}

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