The Container Layout tab in 10Web Website Builder controls how items are organized within a container. Here is an overview of the controls available in this tab.
Container layout
Choose whether you want the container layout to be Flexbox or Grid.
By default, this option is set to Flexbox.
Content width
You can control whether the elements inside the container are boxed within a specific width or occupy the entire container width. Select between Boxed or Full-Width options from the dropdown.
How to determine if you need Boxed or Full Width
- If you want to adjust the width of the content inside the container but not the container's width, choose Boxed and adjust the container's content width using the width control.
- If you want to adjust the container's width but not the container's content width, opt for Full Width and adjust the container's width using the width control.
- If you want to adjust both the container's width and content width, select Full Width, adjust the container's width using the width control, and fine-tune the container's content width using padding in the Advanced tab.
Note:
The Content Width setting can be configured individually for responsive layouts.
Width
Control the container's width or the container's content width in PX / % / VW / EM / REM. This control behaves differently based on whether Content Width is set to Boxed or Full Width.
Boxed
When Content Width is set to Boxed, the width control allows you to adjust the width of the content inside the container.
Note:
This is the default setting for new containers.
Full width
When Content Width is set to Full Width, the width control enables you to adjust the container's width.
Note:
By default, Boxed and Full Width containers will adapt to the available space according to their placement in the layout. If a container is a parent, it will occupy the full viewport width. If nested within a parent container, the nested container will take the full parent's content width.
Min height
Control the minimum height of the content inside the container. You can use the slider or manually enter a value in PX,VH,EM or REM to set the desired minimum container height.
Note:
Setting the value to 100VH will match the height of the viewport. This setting can be adjusted individually for responsive layouts.
Items
The following controls apply to all elements within the container.
Direction
Choose between Row, Column, or Reversed options for the most basic yet crucial container layout options:
Row: Items are positioned horizontally.
Column: Items are positioned vertically.
Row reverse: Items are positioned horizontally but in reverse order.
Column reverse: Items are positioned vertically but in reverse order.
Justify content
The justify-content property defines alignment along the item's center axis and distributes leftover space between items:
Start: Justifies content to the starting edge of the container.
Center: Justifies content to the center of the container.
End: Justifies content to the ending edge of the container.
Space between: Creates space between the content, placing the first item at the starting edge and the last at the ending.
Space around: Creates equal space between the container and items.
Space evenly: Creates equal space between items without considering the container.
Align items
The align-items property aligns items on their center axis based on the chosen direction:
Start: Aligns items to the starting edge of the container.
Center: Aligns items to the center of the container.
End: Aligns items to the ending edge of the container.
Stretch: Attempts to stretch items to fit the container (only applies if items do not have a defined width).
Note:
Often, combining alignment and justification properties is necessary to achieve specific goals.
Content gap
Use the Gap option to add space between elements, enhancing design control. Enter a value in PX, %, VW (Viewport Width), EM or REM using the slider or manual input.
Wrap
Applying the wrap property allows elements with defined widths to wrap into multiple lines instead of forcing them onto a single line. This enables the creation of multi-line elements within the same container.
Additional options
Overflow
Control how the content inside a container behaves when it doesn't fit within the viewport. Choose between Default, Hidden, or Auto from the dropdown selector:
Default: Allows overflowed items to extend outside the container.
Hidden: Hides overflowing items, making them inaccessible.
Auto: Creates a scrollbar when content overflows, ensuring accessibility and mobile swipe functionality.
HTML Tag
Select the most appropriate HTML tag for your container from the dropdown menu. Containers can also be made clickable by choosing the tag.
Note:
HTML tags are crucial for SEO as they impact how search engines rank and interpret content. This setting can be configured individually for responsive layouts.