---
title: Column
description: "The **Column Block** lets you organize content inside a Row Block. You can add text, images, buttons, headings, and other Gutenberg blocks inside a column. You can also place another Row Block inside a column to create nested layouts. Use…"
url: "https://shapekode.com/product/shapeblock/docs/column/"
updated: "2026-10-15"
category: Layout Docs
---

# Column

The **Column Block** lets you organize content inside a Row Block. You can add text, images, buttons, headings, and other Gutenberg blocks inside a column. You can also place another Row Block inside a column to create nested layouts.

Use the Column Block to build multi-column layouts and control the width, alignment, spacing, background, and border of individual columns.

## How to Add a Column Block

Follow these steps to add and configure the Column Block in the Gutenberg editor.

### Step 1: Add the Column Block

1. Open a page or post in the WordPress Gutenberg editor.
2. Insert a ShapeBlock Row Block.
3. Select a column inside the row, or add a column if needed.
4. Add your desired Gutenberg blocks inside the column.
5. Select the column to access its settings in the block sidebar.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-5.png)

### Step 2: Configure the Column Block

Select the Column Block and open its settings in the right-hand sidebar. The available tabs are:

- **Settings:** Configure the HTML tag, custom CSS class, responsive visibility.
- **Layout:** Configure Column width, Alignment & Size, Flexbox alignment and other layout options.
- **Style:** Customize spacing, background, border, border radius, and box shadow.
- **Advanced:** Configure additional spacing and background settings for the block.

## Settings Tab

The Settings tab contains the **General** and **Responsive** panels. Use these settings to configure the column's HTML tag, custom CSS class, and device visibility.

### 1. General

The General panel contains the following settings:

#### HTML Tag

Choose the HTML element used to wrap the column's content.

Available options:

- `div`
- `section`
- `article`
- `aside`

Choose a tag that matches the purpose of the content. For example, use `section` for a meaningful content section or `aside` for supplementary content.

#### Custom CSS Class

Enter a custom CSS class to target the column with your own CSS. This is useful when you want to apply additional styling that is not available through the block controls.

### 3. Responsive

Control the visibility of the Row Block on different device types.

- **Hide on Desktop:** Hides the row on desktop devices.
- **Hide on Tablet:** Hides the row on tablet devices.
- **Hide on Mobile:** Hides the row on mobile devices.

Enable the appropriate option to hide the row on the selected device type.

## Layout Tab

The Layout tab contains the **Width**, **Alignment & Size**, and **Flexbox** panels. These settings control the column's dimensions and how its content is arranged.

### 1. Width

Use the Width panel to control how much space the column occupies inside its parent Row Block.

**Width Type**

Choose one of the following width calculation methods:

- **Percentage:** Set the column width using a percentage-based value.
- **Flex:** Let the column grow according to its flex settings.
- **Custom:** Set a specific width using a supported unit.

**Width**

Available when **Percentage** or **Custom** is selected. Set the column width using the available units:

- `%`
- `px`
- `rem`
- `vw`

The width can be configured separately for desktop, tablet, and mobile devices.

**Flex Grow**:

Available when **Flex** is selected. Controls how much the column can grow relative to other flex items. The available value range is `0–20`.

A higher value allows the column to take a larger share of the available space compared with columns having lower grow values.

**Flex Basis**:

Available when **Flex** is selected. Sets the initial size of the column before the flex layout distributes available space.

Flex Grow and Flex Basis also support device-specific values.

### 2. Alignment & Size

This panel controls the column's vertical alignment within its parent row and its minimum height.

**Vertical Align (Self)**

Choose how the column aligns along the vertical axis:

- **Default:** Use the default alignment behavior.
- **Top:** Align the column to the top.
- **Middle:** Align the column to the middle.
- **Bottom:** Align the column to the bottom.
- **Stretch:** Stretch the column along the available cross-axis space.

This is useful when columns contain different amounts of content and need consistent alignment.

**Min Height**

Set the minimum height of the column. This helps maintain a consistent column height even when the content inside different columns varies.

The minimum height can be configured separately for desktop, tablet, and mobile devices.

### 3. Flexbox

The Flexbox panel controls the arrangement, alignment, wrapping, and spacing of content inside the column.

**Direction**

Choose the direction in which the column's inner content is arranged:

- **Row:** Arrange items horizontally.
- **Row reverse:** Arrange items horizontally in reverse order.
- **Column:** Arrange items vertically.
- **Column reverse:** Arrange items vertically in reverse order.

**Justify Content**

Controls how items are distributed along the main axis.

Available options:

- **Start:** Place items at the beginning.
- **Center:** Place items in the center.
- **End:** Place items at the end.
- **Space between:** Distribute items with space between them.
- **Space around:** Distribute space around each item.
- **Space evenly:** Distribute equal space between items and at both ends.

**Align Items**

Controls how individual items align along the cross axis.

Available options:

- **Stretch:** Stretch items across the available cross-axis space.
- **Top:** Align items to the top.
- **Middle:** Align items to the middle.
- **Bottom:** Align items to the bottom.
- **Baseline:** Align items according to their text baselines.

**Align Content**

Controls how multiple lines or groups of items are aligned when the layout has extra cross-axis space.

Available options:

- **Stretch**
- **Top**
- **Middle**
- **Bottom**
- **Space between**
- **Space around**

This setting is most useful when the content wraps onto multiple lines.

**Wrap**

Choose how items behave when they do not fit on one line:

- **No wrap:** Keep items on a single line.
- **Wrap:** Allow items to move onto additional lines.
- **Wrap reverse:** Wrap items in reverse cross-axis order.

**Gap**

Set the space between items inside the column. Use this to create consistent spacing between headings, paragraphs, images, buttons, and other inner blocks.

Direction, Justify Content, Align Items, Align Content, Wrap, and Gap support separate settings for desktop, tablet, and mobile devices.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-3.png)

## Style Tab

The Style tab contains the **Spacing**, **Background**, and **Border** panels. Use these controls to customize the column's appearance and spacing.

### 1. Spacing

The Spacing panel contains two controls: Padding and Margin.

- **Padding**: Controls the space inside the column, between its edges and its content. Increase the padding when text, images, or buttons need more room around them.
- **Margin**: Controls the space outside the column. Use it to create separation between the column and surrounding elements.

Both Padding and Margin support responsive values for desktop, tablet, and mobile devices.

### 2. Background

Use the Background panel to customize the column's background.

- **Background Color**: Choose a background color for the column to distinguish it from surrounding content.
- **Background Gradient**: Apply a gradient background to create a transition between colors.

Choose the background that best matches your page design and improves the visual separation of the column's content.

### 3. Border

The Border panel contains controls for the column's border, corner radius, and shadow.

- **Border:** Customize the column's border using the available Border controls.
- **Border Radius:** Adjust the rounding of the column's corners. Use larger values for more rounded corners.
- **Box Shadow:** Add a shadow around the column to create visual depth and separation from the background.