Containers blocks are used to arrange blocks on a page. Blocks of category container, context and list all function as container blocks. Container blocks have content areas into which a list of blocks are rendered. List category blocks can render container areas for each element in the data array.
Blocks on a page can be arranged using a span or flex layout. Blocks in span layout are placed in a 24 column grid system, whereas flex blocks dynamically grows or shrink to fit content into a row depending on content size and screen size.
Under the hood, Lowdefy layouts are based on the Ant Design Grid System. The content areas are implemented as a row, and blocks are implemented as a column.
Content areas
Each container has content areas - these are areas where nested blocks can be placed. All container blocks have a primary content area. This area is called content. Container blocks might have other content areas, like header, footer, or title. These content areas are implemented specifically by the block.
To place blocks in the primary content area of a container, the block definitions for those blocks can be placed inside the blocks array of the container block.
In the following examples, blocks of type
Containerwill represent a generic container block, and blocks of typeBlockwill represent a generic block. TheContainerblock might be aBox, aCard, aPageHeaderMenuor any other container or context block. TheBlockblocks could be any type of block, including other container blocks.
Two blocks in the primary content area (content) of a container:
- id: container
type: Container
blocks:
- id: block1
type: Block
- id: block2
type: BlockTo place blocks in other content areas, the block definitions can be placed in the blocks array of the specific area in the areas object:
Note the blocks are placed under
areas.[areaName].blocks
Blocks in the header, content and footer areas:
- id: container
type: Container
areas:
header:
blocks:
- id: block1
type: Block
content:
blocks:
- id: block2
type: Block
footer:
blocks:
- id: block3
type: BlockPlacing blocks both in the blocks array, as well as under the areas.content.blocks array is an anti-pattern, and in this case the blocks under blocks will overwrite those under areas.content.blocks.
Anti-pattern: Blocks in the blocks and areas.content.blocks:
- id: container
type: Container
blocks:
- id: block1
type: Block
areas:
content:
blocks:
- id: block2
type: BlockLayouts using span
Each content area has 24 columns. Blocks have a span property, which determines how many columns the block occupies. Blocks are laid out horizontally, until the sum of the spans is more than 24, then the last block block is wrapped to the next row.
By default a block is given a span of 24. This is what makes blocks lay out vertically below each other.
Blocks are also given a default span of 24 for mobile layouts, even if another span is given, to provide a good default mobile experience. Read more about responsive layouts below.
Block spans example:
- id: container
type: Container
blocks:
- id: block1
type: Block # Default span of 24
- id: block2
type: Block
layout:
span: 16 # Two thirds of the area
- id: block3
type: Block
layout:
span: 8 # Remaining one third of the area
- id: block4
type: Block
layout:
span: 12
- id: block5
type: Block
layout:
span: 18 # Sum would be over 24, so wraps to the next rowLayouts using flex
Blocks can also be laid out using CSS flexbox properties. These properties are grow (flex-grow), shrink (flex-shrink), size (flex-basis) and flex (flex). If any of these properties are set, the default span of 24 or any span set in the configuration is not applied. If one of grow, shrink, or size are set, the other properties take their default values. The flex property overwrites the grow, shrink, and size properties.
Block layout properties
The layout object on blocks can be used to control how a block is placed in the layout. The layout properties that can be defined are:
align: Enum - Align block vertically in the area. Options aretop,middle, andbottom. Defaulttop.flex: String - Set theflexCSS property. This overwrites thegrow,shrink, andsizeproperties.grow: Number - Set theflex-growCSS property. Default 0.order: Number - Change the order blocks are rendered in. By default blocks are rendered in the order they appear in the blocks array.offset: Number - Number of grid cells to shift the block to the right.pull: Number - Shift the block this number of cells to the left. This will make it overlap above with previous blocks.push: Number - Shift the block this number of cells to the right. This will make it overlap under with the following blocks.shrink: Number - Set theflex-shrinkCSS property. Default 1.size: String | Number - Set theflex-basisCSS property. Defaultauto.span: Number - Number of grid cells the block should occupy.
Block layout properties usage examples:
Area layout properties
Properties can be set on each area to control how blocks are layed out inside that area. These properties are set under the areaName key:
The properties that can be set are:
align: Enum - Align blocks vertically in the area. Options aretop,middle, andbottom. Defaulttop.direction: Enum - Set theflex-directionCSS property for the area. Options arerow,row-reverse,column, and andcolumn-reverse. Defaultrow.gutter: Number | Array - Create gutter (space) between blocks placed in the area. If an array, the first element is the horizontal gutter, and the second is the vertical gutter.justify: Enum - Justify blocks horizontally inside the area. Options arestart,end,center,space-around, andspace-between. Defaultstart.overflow: Enum - Set theoverflowCSS property for the area. Options arevisible,hidden,scroll, andspace-between. Defaultvisible.wrap: Enum - Set theflex-wrapCSS property for the area. Options arewrap,nowrap, andwrap-reverse. Defaultwrap.