> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-core/sds-tools/layout-system/css-grid/sds-grid-column.md).

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

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

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

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_703CkzPx9rque70Qj%2F-Mdrfi1944DHGiQ9yCEE%2F-Mds2L0rkd5wjpi6cZNi%2Fimage.png?alt=media\&token=167a644d-d128-4af8-9dcc-0a30f7e8faef)

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:

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_703CkzPx9rque70Qj%2F-Mdrfi1944DHGiQ9yCEE%2F-Mds5zwoKk1h4dhoT5k4%2Fimage.png?alt=media\&token=820bffef-ded1-4d35-bc24-b17c3d32e328)

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

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

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_703CkzPx9rque70Qj%2F-Mdrfi1944DHGiQ9yCEE%2F-Mds6SxdAv03rjJChrOG%2Fimage.png?alt=media\&token=3538bfb8-dcd5-4751-8a45-c05def3eba94)

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

```scss
.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;
    }
  }
}
```