Grid Container

Grid Containers allow you to arrange elements in a two-dimensional layout using rows and columns. While Flexbox is designed primarily for arranging elements along a single main axis, Grid gives you control over both the horizontal and vertical structure of the layout.

Grid is especially useful when multiple elements need to follow the same row and column structure, such as cards, galleries, feature blocks, or other repeating content.

Note: Grid layout is available when the Grid Container feature is enabled.

Understanding Grid Containers

A Grid Container divides its available space into columns and rows. The intersections of these rows and columns create grid areas where the Container's direct child elements are placed.

For example, a Grid with three columns and two rows creates six available positions:

A
B
C
D
E
F

Unlike a Flexbox Container, where the layout is primarily controlled by a Direction, a Grid Container defines both its horizontal and vertical structure.

Columns and Rows

Use Columns and Rows to define the basic structure of the Grid.

Columns
1
2
3
Rows
1
2
3

By default, you can select the number of equal Columns and Rows. For more control over their proportions and track sizes, choose Custom and define the Grid tracks manually using CSS Grid track sizing values.

Custom Grid Structure

For more control over the Grid structure, set Columns or Rows to Custom and define the Grid tracks manually.

Custom Columns are based on the CSS grid-template-columns property, while Custom Rows are based on grid-template-rows. This allows you to define the size and proportions of individual Grid tracks using CSS Grid values.

A simple way to create proportional tracks is to use the fr unit, which represents a fraction of the available space. For example, 2fr 1fr divides the available space into three fractions, giving two fractions to the first track and one fraction to the second.

Tip: Custom Grid layouts follow CSS Grid track sizing syntax. For a comprehensive explanation of CSS Grid, including grid-template-columns, grid-template-rows, fr, minmax(), and repeat(), see the Complete Guide to CSS Grid.

Custom Columns

Use custom Columns to create horizontal layouts with different column widths.

1fr 1fr 1fr
1fr
1fr
1fr

Three equal columns.

2fr 1fr
2fr
1fr

The first column takes twice as much available space as the second.

1fr 2fr 1fr
1fr
2fr
1fr

Three columns with a wider center column.

Custom Rows

The same principle can be used with Rows to create Grid tracks with different heights.

1fr 1fr 1fr
1fr
1fr
1fr

Three equal rows.

2fr 1fr
2fr
1fr

The first row takes twice as much available space as the second.

Custom Columns and Rows

Columns and Rows can also be customized at the same time. This allows you to define both the horizontal and vertical proportions of the Grid.

Columns: 1fr 2fr
Rows: 1fr 2fr
A
B
C
D

The second column is twice as wide as the first, while the second row is twice as tall as the first.

Gaps

Gaps control the spacing between the rows and columns of the Grid. Column Gap adds horizontal space between columns, while Row Gap adds vertical space between rows.

A
B
C
D
E
F

The Row and Column values can be linked when you want to use the same spacing in both directions, or configured independently.

Auto Flow

Auto Flow determines how elements are automatically placed into available positions in the Grid.

Row
A
B
C
D
E
F

Elements fill each row before continuing to the next row.

Column
A
B
C
D
E
F

Elements fill each column before continuing to the next column.

Grid Alignment

Grid provides two types of alignment controls. Justify Items and Align Items control the elements inside their individual grid areas, while Justify Content and Align Content control the position and distribution of the Grid structure as a whole.

Justify Items

Justify Items controls the horizontal position of elements inside their grid areas.

Start
A
Center
A
End
A
Stretch
A

Align Items

Align Items controls the vertical position of elements inside their grid areas.

Start
A
Center
A
End
A
Stretch
A
Tip: Think of Items as the elements inside individual grid areas, while Content refers to the Grid structure as a whole.

Justify Content

Justify Content controls the horizontal distribution of the entire Grid inside the Container. This setting is available when Columns is set to Custom.

You can use Start, Middle, End, Space Between, Space Around, or Space Evenly to control how the Grid columns are distributed across the available horizontal space.

Align Content

Align Content controls the vertical distribution of the entire Grid inside the Container. This setting is available when Rows is set to Custom.

You can use Start, Middle, End, Space Between, Space Around, or Space Evenly to control how the Grid rows are distributed across the available vertical space.

Responsive Grid Layouts

Grid structure and alignment settings can be adjusted independently for different responsive breakpoints.

A common approach is to use multiple columns on larger screens and reduce the number of columns on smaller devices. For example, a three-column desktop Grid can be changed to a single-column layout on mobile.

Columns, Rows, Gaps, Auto Flow, and the Grid alignment controls can be adjusted for different devices, allowing the same content structure to adapt to the available screen size.

Grid Layout Settings

The following controls are available in the Layout tab when Container Layout is set to Grid.

Grid Container Layout settings
Container Layout

Select Grid to use the Grid layout system for the Container. This option is available when the Grid Container feature is enabled.

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.

Grid Outline

Show or hide the Grid outline in the editor to make the Grid structure easier to see while building the layout.

Columns

Set the number of equal columns in the Grid, or choose Custom to define your own column structure. The default is 3 columns on desktop and 1 column on mobile.

When Custom is selected, define the tracks using CSS grid-template-columns syntax.

Rows

Set the number of equal rows in the Grid, or choose Custom to define your own row structure. The default is 2 rows.

When Custom is selected, define the tracks using CSS grid-template-rows syntax.

Gaps

Set the spacing between Grid tracks. Row Gap controls the vertical spacing between rows, while Column Gap controls the horizontal spacing between columns. Link the values to use the same spacing in both directions.

Auto Flow

Choose how elements are automatically placed into the Grid.

  • Row: Fill each row before continuing to the next row.
  • Column: Fill each column before continuing to the next column.
Justify Items

Align elements horizontally inside their individual grid areas using Start, Center, End, or Stretch.

Align Items

Align elements vertically inside their individual grid areas using Start, Center, End, or Stretch.

Justify Content (Custom Columns only)

Control the horizontal distribution of the entire Grid using Start, Middle, End, Space Between, Space Around, or Space Evenly. This control appears when Columns is set to Custom.

Align Content (Custom Rows only)

Control the vertical distribution of the entire Grid using Start, Middle, End, Space Between, Space Around, or Space Evenly. This control appears when Rows is set to Custom.

Additional Options

Grid Containers use the same additional Container options as Flexbox Containers.

Grid Container 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.

For backgrounds, borders, spacing, positioning, motion effects, transforms, visibility, and Custom CSS, see Container Style & Advanced Settings.

© WebshopWorks - Professional PrestaShop Addons