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

Content

1. Container snippets
2. Container sizes
3. Align container blocks
4. Vertical alignment
5. Padding
6. Background Colour
7. 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.

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

Align container blocks

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

Vertical alignment

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

• top
• center
• bottom
• stretch

Padding

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

Background Colour

You can set the background colour of a container block. Works best together with a custom padding.

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.

Updated on: 15/05/2023