# Columns

# Basics

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

 

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

  1. Click on the  ​​icon to open the Inserter Panel
  2. Search for the Cwicly Columns block
  3. Click on the Cwicly Columns block to insert it into your page

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

  1. Open the Quick Insert panel in the parent block
  2. Search for the Cwicly Columns block
  3. 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:

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Find the Add Column button
  6. Click on the Add Column button

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

  1. Select the Column block you want to remove
  2. Navigate to the block toolbar
  3. Find the icon
  4. 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).

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. 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.

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. Click to add a Module
  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. 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.

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. 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.

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. Modify Minimum Height, Row Gap or Column Gap
  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. Click appropriate button to reset Minimum Height, Row Gap or Column Gap
  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Navigate to Minimum Height, Row Gap, Column Gap
  6. Modify Minimum Height, Row Gap, Column Gap
  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Navigate to Minimum Height, Row Gap, Column Gap
  6. Click appropriate button to reset Minimum Height, Row Gap or Column Gap

# Auto Template

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.

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Toggle the Auto Template property to activate or deactivate it

# Auto Fill

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.

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Toggle the Auto Fill property to activate or deactivate it

# Auto Fit

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

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Toggle the Auto Fit property to activate or deactivate it

# Columns

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

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Find the Columns property
  6. 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.

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Find the Minimum Height property
  6. 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.

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Find the Row Gap property
  6. Enter the Row Gap you desire

# Column Gap

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

  1. Select a Columns block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Grid Settings panel
  5. Find the Column Gap property
  6. Enter the Column Gap you desire