Container Snippet

Please write to us if you would like to have access to this feature: 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

Content

Container snippets
Container sizes
Align container blocks
Vertical alignment
Padding
Background Colour
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

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

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

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

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

justify-content-around: The blocks are evenly distributed in the line, with equal space around them

justify-content-center: The blocks are centred along the line

justify-content-right: The blocks are packed towards the right end line

justify-content-left: The blocks are packed towards the left end line

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

Was this article helpful?

Thank you!