Customize the group layout

Group blocks help you organize content in a container that you can style and position as a unit. This guide will show you how to use the layout settings to create responsive, well-aligned page sections with a Group block.

By default, a Group block organizes the blocks within to display on top of each other. Changing how blocks are arranged within a group lets you control whether content appears side-by-side (horizontally) or stacked (vertically), giving you more layout flexibility for your design. You can customize the alignment of the content in the group by following these steps:

1. Select List View at the top of the editing screen.
2. Select the Group block.
3. In the block settings sidebar on the right, choose from one of these options:
   • Group: The default arrangement for Group blocks.
   • Stack: Arranges blocks vertically, one above the other. Ideal for creating clear, sequential content like steps or featured items.
     • Under Justification, change vertical alignment with options like top, center, or bottom.
   • Row: Places blocks side by side horizontally. Perfect for creating feature comparisons or image galleries.
     • Under Justification, adjust the horizontal alignment with options like left, center, right, or space between.
   • Grid: Organizes blocks in a customizable grid layout. Useful for product displays, or team members.
4. Click “Save” or “Publish” to save your changes.

Controlling the overall width of your Group block helps you create visual hierarchy on your page and adjust how your content responds to different screen sizes. You can change how much space the Group block uses, from content width, to wide width, to full width, by following these steps:

1. Select List View at the top of the editing screen.
2. Select the Group block.
3. In the toolbar that appears, select the “Align” icon and choose from:
   • Content (or “None”): Sets the width of blocks to the default width of the content area. Best for regular content sections.
   • Wide width: Sets the width of blocks to a wider (but not full) width. Good for drawing attention to important content without taking up the entire screen.
   • Full width: Sets the block to fill the full width of the available area. Perfect for creating immersive content sections like banners or large image galleries.
4. Click “Save” or “Publish” to save your changes.

Learn more about changing the width of your content.

You can control how much space your content occupies within a group, helpful when creating responsive designs that work well on both mobile and desktop screens. Follow these steps to change the width settings of content within your Group block:

1. Select List View at the top of the editing screen.
2. Select the Group block.
3. In the block settings sidebar, find the “Inner blocks” section. Toggle the “Inner blocks use content width” setting:
   • On: Content will follow the site’s content width settings, or, adjust specific width values using the width controls.
   • Off: Content will extend to fill the full Group block width.
4. Click “Save” or “Publish” to save your changes.

The “Inner blocks use content width” setting controls how wide the content inside your Group block will appear:

When On: Content inside your Group block will follow your site’s global content width setting (usually around 700-800px wide). This creates a contained, centered column of content even if your Group block spans the full width of the page. This improves readability on larger screens while maintaining an attractive layout.

When Off: Content inside your Group block will expand to fill the entire width of the Group block itself. If your Group block is full-width, your content will also stretch across the full width. This is useful for creating edge-to-edge designs like full-width image galleries or when you want content to match the width of your Group block’s background.

A practical example: If you have a Group block with a colored background spanning the full-page width, turning “Inner blocks use content width” on would create a centered column of content with the colored background extending edge-to-edge – perfect for highlighting important information while maintaining visual interest.

Adjusting dimensions allows you to control the height, width, and spacing of your Group block to better fit your content and layout needs. This helps you create visually balanced sections and gives your content room to breathe. Set precise spacing around your Group block content by following these steps:

1. Select List View at the top of the editing screen.
2. Select the Group block.
3. In the block settings sidebar, find the Dimensions section.
4. Set values for:
   • Padding: Space between content and Group block border. More padding creates breathing room around your content.
   • Margin: Space around the outside of the Group block. Helps separate this section from other content.
5. Use the link icon to toggle between uniform or individual side adjustments.

Learn more about customizing block dimensions.

Adjusting this spacing allows you to control how close or far apart content appears within your Group block, creating the right visual relationship between elements. This helps visitors distinguish between related content while maintaining a cohesive section. Manage the spacing between blocks inside your Group:

1. Select List View at the top of the editing screen.
2. Select the Group block.
3. In the block settings sidebar, find the Block spacing section.
4. Use the controls to set:
   • Block spacing: Space between individual blocks. More spacing creates clear separation, while less spacing makes content feel more connected.
   • Minimum height: How tall the Group block should be at minimum. Useful for creating consistent sections or for adding white space for visual balance.

Learn more about adjusting the space between blocks.