> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://helpdesk.webmag.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Container Snippet

|| Please write to us if you would like to have access to this feature: [support@webmag.io](mailto:support@webmag.io)

Container snippets help to create complex layouts. You can add all Webmag snippets within the container blocks. 

![Example of a container snippet with two containers blocks](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/container_60f9t8.gif)


**Content**

1. [Container snippets](#1-container-snippets)
2. [Container sizes](#1-container-sizes)
2. [Align container blocks](#1-align-container-blocks)
3. [Vertical alignment](#1-vertical-alignment)
4. [Padding](#1-padding)
4. [Background Colour](#1-background-colour)
5. [Position](#1-position)


# Container snippets

Currently we have container snippets with 2, 3, 4 and 6 container blocks. Each container block can be resized for different screen sizes.


![](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/container-1_1wo5a2b.jpg)

# Container sizes

Our grid system is defined by 12 columns across a page. You can set adjust size of the containers for 5 different screen sizes. 

* Extra small <576px 
* Small ≥576px
* Medium ≥768px
* Large ≥992px
* Extra large ≥1200px


![Settings of a container snippet with two container blocks. The blocks have a width of 100% (12/12) on screens smaller than 576px and a width of 50% (6/12) on screens bigger that 768px](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/container-sizesneu_1tqraov.jpg)


# Align container blocks

With the alignment options of the container snippet you can change the alignment of the container blocks on the x-axis.


![justify-content-between: The blocks are evenly distributed in the line; the first item is in the start line, the last item in the end line](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/align-blocks-1neu_q0c4y4.jpg)

![justify-content-around: The blocks are evenly distributed in the line, with equal space around them](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/align-blocks-2neu_h69lgx.jpg)

![justify-content-center: The blocks are centred along the line](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/align-blocks-3neu_sv4vyx.jpg)

![justify-content-right: The blocks are packed towards the right end line](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/align-blocks-4neu_1bfe4ja.jpg)

![justify-content-left: The blocks are packed towards the left end line](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/align-blocks-5neu_pcsupp.jpg)

# Vertical alignment

Each container block can be aligned vertically. You can set one of the following options:

* top
* center
* bottom
* stretch


![](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/vertical-alignmentneu_rwtaqd.jpg)


# Padding

Change the padding of each container block to add different sizes of whitespace.


![](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/paddingneu_1m789do.jpg)


# Background Colour

You can set the background colour of a container block. Works best together with a custom [padding](#1-padding).


![](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/background-colourneu_y6awth.jpg)



# Position

If a container block is set to position: sticky, it will stick to the top of the page if another container has a height greater then the window height.


![](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/positionneu_3jbvsh.jpg)