# 3. sds-grid-column()
For more advanced control, you can define where elements/sections start and end. The `sds-grid-column()` mixin can be used for this.
{% hint style="warning" %}
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.
{% endhint %}
```scss
@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:
```markup
```
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:
```scss
.parent {
@include sds-grid(3, sds-spc(8));
}
```
which results in the layout below.
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.
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.
```scss
.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.
```scss
.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;
}
}
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://2600hz.gitbook.io/sds/sds-3.0/sds-core/layout-system/css-grid/sds-grid-column.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.