Block

The Block element is one of the four layout elements in Bricks (1.5+).

Introduced together with the Section & Div element, it provides the same powerful layout controls as the Container but uses a default width of 100% instead of the Container’s fixed 1100px width.

This makes it the perfect element to use inside of a Container (e.g. column/row based layout). Or wherever you need to span the entire available width, plus quick access to direction & alignment settings. As the Block element uses flex by default.

Use blocks to create multi-column layouts, sidebars, or any layout where you want full-width flexbox behavior without the Container’s width constraints. If you want your layout element to only take up the space of its content, use the Div element instead.

Tip: Blocks are ideal for creating column-based layouts. When you need multiple equal-width columns, insert blocks inside a container and set the direction to horizontal - they’ll automatically distribute the available space equally.

Settings

Grid column (text) - CSS grid column span when parent uses grid layout. Controls grid-column property.
Grid row (text) - CSS grid row span when parent uses grid layout. Controls grid-row property.
Query loop - Enable query loop functionality for dynamic content. Available for Container, Block, Div, and Section elements.
Link (link) - Link settings when using anchor tag. Required when HTML tag is set to ‘a’.
HTML tag (select) - HTML tag for the block element. Options: div, section, a [Link], article, nav, ol, ul, li, aside, address, figure, custom. Default: div.
Custom tag (text) - Custom HTML tag when “custom” is selected. Without attributes. Required when HTML tag is ‘custom’.
Display (select) - CSS display property. Options: flex, grid, block, inline-block, inline, none. Default: flex.

Grid Layout (when Display is grid)

Gap (number with units) - Gap between grid items. Controls grid-gap property.
Grid template columns (text) - CSS grid template columns. Supports dynamic data and variables.
Grid template rows (text) - CSS grid template rows. Supports dynamic data and variables.
Grid auto columns (text) - Grid auto columns size. Supports dynamic data and variables.
Grid auto rows (text) - Grid auto rows size. Supports dynamic data and variables.
Grid auto flow (select) - Grid auto flow direction. Options: row, column, dense.
Justify items (justify-content) - Grid justify items alignment.
Align items (align-items) - Grid align items alignment.
Justify content (justify-content) - Grid justify content alignment.
Align content (align-items) - Grid align content alignment.

Flex Layout (when Display is flex)

Flex wrap (select) - Flexbox wrapping behavior. Options: No wrap, Wrap, Wrap reverse.
Direction (direction) - Flexbox direction (row/column). Controls flex-direction property.
Align self (align-items) - Align self for this flex item. Controls align-self property with !important.
Align main axis (justify-content) - Justify content alignment. Controls justify-content property.
Align cross axis (align-items) - Align items alignment. Controls align-items property.
Column gap (number with units) - Gap between flex columns. Controls column-gap property.
Row gap (number with units) - Gap between flex rows. Controls row-gap property.
Flex grow (number) - Flex grow factor. Minimum: 0. Controls flex-grow property. Default placeholder: 0.
Flex shrink (number) - Flex shrink factor. Minimum: 0. Controls flex-shrink property. Default placeholder: 1.
Flex basis (text) - Flex basis value. Supports dynamic data and variables. Controls flex-basis property. Default placeholder: auto.

Order

Order (number) - Flexbox order. Minimum: -999. Controls order property. Default placeholder: 0. Available when display is not ‘none’.

Style

These controls can be accessed under the Style tab in the element settings.

Masonry

Masonry layout (checkbox) - Enable masonry layout for child elements.
Columns (number) - Number of masonry columns. Default: 3. Controls --columns CSS property.
Spacing (number with units) - Spacing between masonry items. Default: 10px. Controls --gutter CSS property.
Horizontal order (checkbox) - Enable horizontal ordering in masonry layout.
Transition: Duration (number with units) - Animation duration for masonry transitions. Default: 0.4s. Set to “0” to disable default animations.
Reveal animation (select) - Animation type for masonry items. Options: Scale, Fade, Slide from left, Slide from right, Skew. Default: Scale. Only applies to new items added to the DOM.

Theme Style: Element – Block

You can change the following Block default settings in your theme styles under “Element – Block”:

width
min-width
max-width
margin
padding

Was this page helpful?