# Columns

The Columns block allows you to organise your content (Column block) in a powerful CSS grid. With the CSS grid, you can position and size blocks anywhere to produce repeatable, responsive layouts.

# Basics

The Columns block is a unique block that allows you to create fresh and extensive layouts without a single line of code.

The Columns block only accepts Column blocks as an inner child.

If you want to add a columns block outside any other block on the page:

Click on the ➕ icon to open the Inserter Panel
Search for the Cwicly Columns block
Click on the Cwicly Columns block to insert it into your page

If you want to add a columns block inside a parent block:

Open the Quick Insert panel in the parent block
Search for the Cwicly Columns block
Click on the Cwicly Columns block to insert it into your parent block

# Grid Settings

# Manual Grid

When all Auto properties are deactivated in the Grid Settings of the Columns block, the grid layout will rely on a fully manually created grid layout through the Grid Editor.

# Add/Remove Column

The Columns is a parent block made up of multiple Column blocks.

While there are multiple ways of adding a Column block, we recommend:

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Find the Add Column button
Click on the Add Column button

The Remove Column button that appears in the Columns block primary tab Grid Settings panel will remove the last column available in the block.

While there are multiple ways of removing a Column block, we recommend:

Select the Column block you want to remove
Navigate to the block toolbar
Find the icon
Click on the icon

# Auto Grid

The Auto Grid property allows you to define whether the Columns block should automatically repeat the layout that is used for the first row over to the next rows (if there are enough Column blocks).

When the Auto Grid property is active, only the first row of the layout you create in the Grid Editor will be used.

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Toggle the Auto Grid property to activate or deactivate it

# Edit Grid Layout

The Edit Grid layout property allows you to visually edit & design your Column blocks layout.

You can add or remove Modules or Fractions, and adjust Height, Row Gap and Column Gap.

# Module

The Module button, allows you to add the number of Modules you set for the row. A Module can be thought of as a placeholder for your Column blocks.

You cannot add more modules than the number of fractions you have set.

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Click the Edit Grid Layout button to open Grid Layout
Click to add a Module

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Click the Edit Grid Layout button to open Grid Layout
Click on the cross on a visual module to remove

# Fractions

Adding fractions leaves ‘potential’ space in case you want to add more modules or ‘stretch’ modules to make uneven columns that will be duplicated in subsequent rows. Adding fractions will allow you to add more Modules to your row.

This is only ‘potential’ space because the auto grid system will base the grid layout on the module skeleton.

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Click the Edit Grid Layout button to open Grid Layout
Add/remove Fractions

# Set Minimum Height, Row Gap or Column Gap

Minimum Height, Row Gap or Column Gap can be modified in the Grid Layout or directly from the primary tab in the block inspector.

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Click the Edit Grid Layout button to open Grid Layout
Modify Minimum Height, Row Gap or Column Gap

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Click the Edit Grid Layout button to open Grid Layout
Click appropriate button to reset Minimum Height, Row Gap or Column Gap

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Navigate to Minimum Height, Row Gap, Column Gap
Modify Minimum Height, Row Gap, Column Gap

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Navigate to Minimum Height, Row Gap, Column Gap
Click appropriate button to reset Minimum Height, Row Gap or Column Gap

# Auto Template

The Auto Template property will only appear if the Auto Grid property is active.

The Auto Template property allows you to let the browser handle the responsiveness of the Columns layout for you, showing fewer columns on smaller devices, and more columns on bigger devices, without needing you to specify as single thing.

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Toggle the Auto Template property to activate or deactivate it

# Auto Fill

The Auto Fill property will only appear if the Auto Template property is active.

The Auto Fill property fills the row with as many columns as it can fit. It creates implicit columns whenever a new column can fit.

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Toggle the Auto Fill property to activate or deactivate it

# Auto Fit

The Auto Fit property will only appear if the Auto Template property is active.

The Auto Fit property fits the available columns into the space by expanding them so that they take up all the available space.

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Toggle the Auto Fit property to activate or deactivate it

# Columns

The Columns property will not be available when the Auto Templateproperty is active.

The Columns property allows you to specify how many columns there should be per row.

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Find the Columns property
Enter the number of Columns you desire

# Minimum Height

The Minimum Height property allows you to specify what the minimum of the columns inside the Columns block should be.

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Find the Minimum Height property
Enter the number of Minimum Height you desire

# Row Gap

The Row Gap property allows you to specify the space between every row of columns.

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Find the Row Gap property
Enter the Row Gap you desire

# Column Gap

The Column Gap property allows you to specify the space between every column in a row

Select a Columns block
Open the block inspector
Navigate to the primary tab
Open the Grid Settings panel
Find the Column Gap property
Enter the Column Gap you desire

blocks columns column