> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/layout/group.md).

# Group

Arrange blocks side by side, stacked, or however you like, with full control over alignment and spacing.

Use it any time you need blocks side by side within a section, like two buttons next to each other, a heading aligned with an icon, or a text-and-image pair.

The Group block works like a mini-container: you place blocks inside it (headings, text, buttons, images) and control how they're arranged, side by side, stacked, centered, spaced apart, or in combination, all without adding a separate section.

### 1. What you can do

* Arrange blocks horizontally (side by side) or vertically (stacked)
* Control alignment, positioning, and spacing between grouped blocks
* Add background colors, gradients, images, or video behind grouped content
* Apply borders and rounded corners to create card-like containers
* Set separate layout and spacing for mobile devices
* Nest groups for complex layouts

### 2. How to add a Group block

You can add an Group block to any [custom section](/arctos-theme/section-templates/section.md) or any compatible block, with no limit on how many you use in a single section.

{% stepper %}
{% step %}
**Click the section or block**

In the Theme Editor (Customize), click the section or block where you want to arrange content.
{% endstep %}

{% step %}
**Add a group block**

Click **Add block** and select **Group**.
{% endstep %}

{% step %}
**Add content blocks**

Add content blocks inside the group (headings, text, buttons, images, etc.).
{% endstep %}

{% step %}
**Arrange the content**

Set the direction, alignment, and spacing using the settings below.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 3. Block settings

#### 3.1. Size

These settings control the dimensions of the group itself.

<table><thead><tr><th width="102.32421875">Setting</th><th width="120.453125">Options</th><th width="501.5703125">When to use</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fit</strong>: the group takes up only as much width as its content needs</li><li><strong>Fill</strong>: the group stretches to fill all available width</li><li><strong>Custom</strong>: set an exact width in pixels or percentage</li></ul></td></tr><tr><td><strong>Height</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fit</strong>: the group is only as tall as the content inside it</li><li><strong>Fill</strong>: the group expands to fill all available height</li><li><strong>Custom</strong>: set an exact height in pixels or percentage.</li></ul></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set the group's width and height independently for mobile.</td></tr></tbody></table>

#### 3.2. Inner content layout

Adjust these settings to control how the blocks inside your group are arranged and spaced relative to each other.

<details>

<summary>Direction</summary>

Chooses the main layout flow for your blocks.

<table><thead><tr><th width="161.15625">Option</th><th width="504.21484375">What it does</th></tr></thead><tbody><tr><td><strong>Vertical (Column)</strong></td><td><strong>Vertical</strong> stacks blocks from top to bottom (default). Use this for standard page layouts, like a heading on top of a paragraph.</td></tr><tr><td><strong>Horizontal (Row)</strong></td><td><strong>Horizontal</strong> arranges blocks side by side from left to right. Use this when you want items next to each other, like a row of icons or product badges.</td></tr></tbody></table>

</details>

<details>

<summary>Alignment and Position</summary>

These settings change how your blocks are spaced out horizontally and vertically. Their behavior adjusts automatically based on the Direction you chose above.

**1. When Direction is Vertical (Column)**

<table><thead><tr><th width="107.87109375">Setting</th><th width="122.09375">Option</th><th width="433.65625">What it does</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td>Moves the entire vertical stack of blocks horizontally across the container.</td></tr><tr><td><strong>Position</strong></td><td><ul><li>Top</li><li>Middle</li><li>Bottom</li><li>Space between</li></ul></td><td>Controls the vertical spacing. <strong>Space between</strong> will push the first block to the very top and the last block to the very bottom, spreading the rest evenly.</td></tr></tbody></table>

**2. When Direction is Horizontal (Row)**

<table><thead><tr><th width="107.87109375">Setting</th><th width="122.09375">Option</th><th width="433.65625">What it does</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li><li>Space between</li></ul></td><td>Controls how blocks are distributed horizontally across the row. <strong>Space between</strong> pushes items to the far left and right edges, leaving even gaps between them.</td></tr><tr><td><strong>Position</strong></td><td><ul><li>Top</li><li>Middle</li><li>Bottom</li></ul></td><td>Aligns the blocks vertically <em>within</em> that row (e.g., aligning a short text block to the top or center of a taller neighboring block).</td></tr></tbody></table>

</details>

<details>

<summary>Align baseline</summary>

Turn this **On** if you have different text sizes (like a large Heading next to a small paragraph) side-by-side. Instead of aligning the tops of their invisible bounding boxes, it aligns the actual bottom line of the text characters. This creates a much cleaner, more professional look for reading.

*Only available when **Direction** is **Horizontal** and **Position** is **Bottom.***

</details>

<details>

<summary>Gap</summary>

The **Gap** setting controls the amount of breathing room between the blocks inside your group to keep your content from looking crowded.

You can stick with the **Default** spacing, choose a specific size between **0** and **32** pixels, or select **Custom** to input your own precise measurement. Adjusting this setting ensures blocks inside your group have the perfect amount of separation for a clean, easy-to-read layout.

</details>

<details>

<summary>Custom on mobile</summary>

Custom on mobile let you independently adjust the **Direction, Alignment, Position, Gap**, and **Align baseline** settings specifically for smaller screens.

</details>

#### 3.3. Style

Fine-tune the appearance of your section, including colors, backgrounds, borders, and spacing for both desktop and mobile.

<details>

<summary>Color scheme</summary>

The Color Scheme setting controls the colors of your text, buttons, and inner blocks based on your store's pre-made color palettes.

<table><thead><tr><th width="119.94921875">Setting</th><th width="99.55078125">Options</th><th width="444.63671875">When to use</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> ensures everything inside the group automatically blends in with its outer layer.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme to make this specific group stand out.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Use the color scheme picker to select a color scheme set in <a href="/arctos-theme/theme-settings/colors.md">Theme settings > Colors</a>.</td></tr></tbody></table>

</details>

<details>

<summary>Background</summary>

Turn Custom background to **On** if you want to override your theme colors and design a unique background from scratch. Once enabled, you can choose from three main types:

<table><thead><tr><th width="93.51953125">Option</th><th width="570.5078125">What it does</th></tr></thead><tbody><tr><td><strong>None</strong></td><td>Keeps the background completely transparent so whatever is behind the section shows through.</td></tr><tr><td><strong>Color</strong></td><td>Lets you choose a Solid color (using a hex code like <code>#FFFFFF</code> for white) or a Gradient for a smooth, multi-color blended look.</td></tr><tr><td><strong>Media</strong></td><td><p>Lets you upload your own <strong>Image</strong> or <strong>Video</strong>, or browse free stock images. You can apply an Overlay (a solid color or gradient tint to ensure your text remains easy to read), enable a Parallax effect, and turn on <strong>Show different media on mobile</strong> to select a dedicated mobile media file.</p><ul><li><a href="/arctos-theme/blocks/basic/image.md">Read more about the Image block</a></li><li><a href="/arctos-theme/blocks/basic/video.md">Read more about the Video block</a></li></ul></td></tr></tbody></table>

When a custom background is used, you can control how sharp or rounded the edges of your layout box appear using the **Corner radius** settings:

* **Main corner** matches the global corner radius set in your theme.
* **Small** and **Extra small** inherit from the main corner value and scale it down proportionally for a subtler effect.
* **None** removes rounding entirely for a sharp, full-bleed look.
* **Custom** lets you set a precise value to match a specific design.

> HÌNH DEMO SETTINGS

{% hint style="info" %}
For a professional look, inner elements (like this Group block) should have a smaller corner radius than the outer container to maintain visual harmony.

* If your outer container uses the **Main corner,** choose **Small** or **Extra small** for this image.
* As a rule of thumb, if the container has large padding, drop the image radius by 2 levels; for normal/small padding, drop it by 1 level. Adjust via **Custom** if needed.
  {% endhint %}

</details>

<details>

<summary>Corner radius</summary>

You can control how sharp or rounded the edges of your layout box appear using the **Corner radius** settings:

* **Main corner** matches the global corner radius set in your theme.
* **Small** and **Extra small** inherit from the main corner value and scale it down proportionally for a subtler effect.
* **None** removes rounding entirely for a sharp, full-bleed look.
* **Custom** lets you set a precise value to match a specific design.

{% hint style="info" %}
For a professional look, inner elements (like this Group block) should have a smaller corner radius than the outer container to maintain visual harmony.

* If your outer container uses the **Main corner,** choose **Small** or **Extra small** for this group.
* As a rule of thumb, if the container has large padding, drop the radius by 2 levels; for normal/small padding, drop it by 1 level. Adjust via **Custom** if needed.
  {% endhint %}

</details>

<details>

<summary>Border</summary>

Turn **Show border** to **On** to display a border around the group container.

<table><thead><tr><th width="144.5">Setting</th><th width="144.5">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Show border</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Toggles the border around the group container.</td></tr><tr><td><strong>Border Top / Bottom / Left / Right</strong></td><td>1–10px (step 1, default 1px)</td><td>Controls the border thickness individually for each side. <em>Available when <strong>Show border</strong> is On.</em></td></tr><tr><td><strong>Custom color</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables choosing a custom border color instead of using the default border color from the active color scheme. <em>Available when <strong>Show border</strong> is On.</em></td></tr><tr><td><strong>Color code</strong></td><td>Color picker (with opacity/alpha)</td><td>Sets the custom border color and opacity (default <code>#000000</code>). <em>Available when <strong>Custom color</strong> is On.</em></td></tr></tbody></table>

</details>

#### 3.4. Spacing

<table><thead><tr><th width="113.93359375">Setting</th><th width="192.8046875">Options</th><th width="419.32421875">What it does</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td>Custom value per side</td><td>Sets the spacing between the group and its surrounding edge.</td></tr><tr><td><strong>Margin</strong></td><td>Custom value per side</td><td>Sets the spacing around the group to separate it from neighboring blocks.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate padding and margin values for mobile.</td></tr></tbody></table>

Use padding to give grouped content room inside its background or border. Use margin to separate the group from nearby blocks. Set mobile values independently when the desktop spacing feels too wide on smaller screens.