> 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-3.0/sds-core/layout-system/css-grid.md).

# CSS Grid

Working with the CSS Grid property to control layout and presentation.

{% hint style="info" %}
This section primarily focuses code implementation for developers. However, it is still important for designers to understand the methods in which design mockups are  translated to code, so designers are still encouraged to review this section.
{% endhint %}

Grid is a CSS property that allows developers to create flexible layouts that can easily adapt to different device screens and viewports.

Sipster's layout system includes a handful of custom mixins that make implementing CSS Grid and its associated properties simple and efficient. In order to use these mixins properly and to their full potential, it is critical to first have a working knowledge of the CSS Grid property and all it encompasses. [Learn more about CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/). 

It's important to note that not all of these mixins will be used in every scenario. Developers are responsible for deciding which methods best fit their layout needs on a per project basis. Learn more about each of the mixins in the following sections.

{% content-ref url="/pages/wvPabgXaoV0XVJcohYXh" %}
[1. sds-grid()](/sds/sds-3.0/sds-core/layout-system/css-grid/sds-grid.md)
{% endcontent-ref %}

{% content-ref url="/pages/5vFmo757EXOjVkgQGMmC" %}
[2. sds-custom-grid()](/sds/sds-3.0/sds-core/layout-system/css-grid/sds-custom-grid.md)
{% endcontent-ref %}

{% content-ref url="/pages/gX0wGwN8kedyTCtJN6JL" %}
[3. sds-grid-column()](/sds/sds-3.0/sds-core/layout-system/css-grid/sds-grid-column.md)
{% endcontent-ref %}