Description
The Column Block provides the third and final base layer for all section layouts, following the Bootstrap Grid System like this: Container > Row > Column.
The Column Block can ONLY be placed inside a Row Block, because rows exist to manage columns.
Any block EXCEPT a Row Block can be placed inside a Column Block (the Row Block can ONLY be placed inside a Container Block).
Think of a filing cabinet. It has a drawer (ie. a Container) with rails (ie. Rows) that create a framework for your hanging file folders (Columns). You have to hang those file folders from the rails, otherwise you just have a bunch of loose folders with hooks on the ends. Your folders can contain a huge variety of content like receipts, photos, maps, and manuscripts (it’s a stretch, just go with it). You can choose to put those items loose in the drawer, or you can tuck them in file folders and hang them from the rails so they stay tidy and organized.
Screenshots
Settings
Column Settings
Column Width
Columns use a 12-column system. The column width slider allows you to set the width of the Column Block from 1 to 12.
As long as the total value of columns is not greater than 12, the Column Blocks will align horizontally next to one another. Once a block sits greater than 12, it will automatically fall to the new row. This behaviour allows for Column Blocks to naturally create multiple rows of Column Blocks without requiring a new Row Block be added each time.
Padding
These top, right, bottom, and left sliders, with a range from 0 to 12, control the amount of interior space there is between the edges of the Column Block and its contents. More about Padding.
Display
This controls how the Column Block is displayed, and governs the alignment or order of its child blocks as explained below.
Block
The Column Block generates a block element box, creating line breaks both before and after the element when in the normal flow of the document. More about Block Display.
Flex
The element behaves like a block element and lays out its content according to the flexbox model. Options include Flex Direction (Column, Row, Column Reverse, Row Reverse), Flex Align (Start/Top, Center, End/Bottom), Flex Justify (Start/Left, Center, End/Right, Space Between). More about Flex Display.
None
This turns off the display of the Column Block and its contents, so that it has no effect on the layout (the document is rendered as though the element did not exist). This is specifically handy for making adjustments to layout and elements across desktop, tablet, and phone views. More about Responsive Views.
Background Settings
Color
This option fills the entire Container Block background with the selected color. The colors found in the dropdown are set in the Global Styles > Colors area, in case you need to change your options.
Background: Image
This allows you to add images as backgrounds within a Container Block, and to order those image and gradient layers. More about Image Backgrounds.
Background: Gradient
This allows you to add gradient backgrounds within the Container Block, and to order those image and gradient layers. More about Gradient Backgrounds.
Advanced
HTML Anchor
This allows you to enter a unique ID identifier, so you can create a URL for this specific Container Block within the page. More about HTML Anchors.
Additional CSS Class(es)
This allows you to enter a unique Class identifier, to facilitate custom CSS targeting within the theme for custom development. More about Theme Customizations.
It also enables the use of Foundry utility classes. More about Utility Classes.