Container element
Note: The information on this article applies only to Web Pages' visualizations.
A Visualization always requires a Container element to wrap any element or Widget (either one or many) but you cannot wrap a Container within another Container.
On a Container Element, you can define up to 4 Columns and also set different widths for each of these Columns. This gives you the possibility to achieve a wide variety of layouts. These Columns behave differently according to the screen size (such as mobile screens).
This is how our grid system adapts, according to screen's size:
  | Large screens (≥1200px)  | Medium screens (≥992px)  | Small screens (≥768px)  | Extra small screens (<768px)  | 
Column behavior  | Horizontal  |  Vertical (stacked)  | 
  | 
  | 
Container width  | 1170px  | 970px  | 750px  |  Auto (100%)  | 
Gutter width  | 30px (15px on each side of a column)  | 
  | 
  | 
  | 
Here you can see an example of the grid system in action and how the columns stack on smaller screens:
Please see the following figure to learn how to add a container, set up the number of columns and customize the width of each column in a Visualization:

