Container Layout Settings

The Layout settings control the size and structure of a Container and how its inner elements are arranged.

Use these settings to define the Container's width and height, choose a layout system, control the direction and alignment of its elements, and configure additional behavior such as wrapping and overflow.

Note: If you are new to Flexbox, see the Working with Containers article for visual examples of Direction, Justify Content, Align Items, nested Containers, and responsive layouts.

Layout Tab

Configure the size, structure, and arrangement of the Container and its inner elements.

Container Layout tab - Container

Container

Container Layout

Choose the layout system used to arrange the elements inside the Container.

  • Flexbox: Arrange elements in a row or column and control their alignment, spacing, wrapping, and distribution.
  • Grid: Arrange elements in rows and columns.

This control is available when the Grid Container feature is enabled. Otherwise, Containers use Flexbox automatically.

Content Width

Choose how the Container's content uses the available horizontal space.

  • Boxed: Restricts the inner content to a specified width.
  • Full Width: Allows the Container to use the full available width.
Width (Full Width only)

Set the width of the Container. This control appears when Content Width is set to Full Width.

Width (Boxed only)

Set the width of the inner content. This control appears when Content Width is set to Boxed.

Min Height

Set the minimum height of the Container. Use 100vh to make the Container at least as tall as the browser viewport.

Direction (Flexbox only)

Choose the direction in which elements are placed inside the Container. This control is available when Container Layout is set to Flexbox.

  • Row - horizontal: Place elements horizontally from start to end.
  • Column - vertical: Place elements vertically from top to bottom.
  • Row - reversed: Place elements horizontally in reverse order.
  • Column - reversed: Place elements vertically in reverse order.
Justify Content (Flexbox only)

Distribute elements along the main axis using Start, Center, End, Space Between, Space Around, or Space Evenly. This control is available when Container Layout is set to Flexbox.

Align Items (Flexbox only)

Align elements along the cross axis using Start, Center, End, or Stretch. This control is available when Container Layout is set to Flexbox.

Gaps (Flexbox only)

Set the row and column spacing between elements inside the Container. This control is available when Container Layout is set to Flexbox.

Wrap (Flexbox only)

Choose whether elements stay on a single line or wrap onto additional lines. This control is available when Container Layout is set to Flexbox.

  • No Wrap: Keep elements on a single line.
  • Wrap: Allow elements to wrap onto additional lines when needed.
Align Content (Flexbox + Wrap only)

Control the distribution of wrapped lines using Default, Center, Start, End, Space Between, Space Around, or Space Evenly. This control appears when Container Layout is set to Flexbox and Wrap is set to Wrap.

Container Layout tab - Additional Options

Additional Options

Overflow

Control how content that extends beyond the boundaries of the Container is handled.

  • Default: Use the default overflow behavior.
  • Hidden: Hide content that extends beyond the Container.
  • Auto: Automatically provide scrolling when the content exceeds the Container's boundaries.
HTML Tag

Select the semantic HTML element used for the Container.

  • Default
  • div
  • header
  • footer
  • main
  • article
  • section
  • aside
  • nav
  • a (Link)
Link (a (Link) only)

Set the URL for the Container. This control appears when HTML Tag is set to a (Link), making the entire Container clickable.

Note: Do not add links to elements nested inside a linked Container, as this can break the layout.

© WebshopWorks - Professional PrestaShop Addons