Flexible Layout Section examples

These are real live examples of the Flexible Layout Section. No screenshots or anything. The text and button blocks in it are just for illustration purposes and are from Gutenberg core.

Flexible Layout Section 1

• Layout type: Flex row
• Align: full width.
• Inner content: Theme wide width
• Vertical alignment: Equal height
• Horizontal alignment inner sections: left
• Sections (flex-column) 70% and 30%
• Gutenberg button in each section
• Vertical alignment inner sections: ‘push last to bottom’ active

Flexible Layout Section 2

• Layout type: Flex row
• Align: full width.
• Inner content: Theme wide width
• Vertical alignment: Equal height
• Horizontal alignment inner sections: left
• Sections (flex-column) 350% and empty (flex mode)
• Gutenberg button in each section
• Vertical alignment inner sections: ‘push last to bottom’ active

Flexible Layout Section 3

• Layout type: Grid
• Number of columns (flow): 3
• Align: full width
• Inner content: Theme wide width
• Each column with a Flexible Layout Section (default flow)
• Remove horizontal padding: on (padding has no use in this layout)

Flexible Layout Section 4

• Layout type: Grid
• Number of columns (flow): 3
• Align: full width
• Inner content: Theme wide width
• Each column with a Flexible Layout Section (default flow)
• Remove horizontal padding: off
• Push last block to bottom in each cell: on

Flexible Layout Section 5

• Layout type: Grid
• Number of columns (flow): 3
• Align: full width
• Inner content: Theme wide width
• Background used on the parent section and 1st inner section (see the difference between the padding of sections 1, 2, and 3)
• Each column with a Flexible Layout Section (default flow)
• Remove horizontal padding: off

Flexible Layout Section 6

• Layout type: Grid
• Number of columns (flow): 3
• Align: full width
• Inner content: None
• Background used on the parent section and all inner sections.
• Each column with a Flexible Layout Section (default flow)
• Remove horizontal padding: off

Flexible Layout Section 7

Because the grid sections always have equal height and our plugin allows for infinite nesting, you can create a Bento-like design.

• Layout type: Grid
• Number of columns: 2
• Align: wide width
• Inner content: wide width
• Applied the ‘Section in all columns’ button 3 times
• Set the top-left inner section to flex-row and inserted two inner sections (1 and 2)
• The section below that is changed to flex-column, and I inserted 2 stacked sections (4 and 5)
• Background used on all inner sections, except on the inner sections that are used as parent sections for 1,2, 4 and 5
• Remove horizontal padding: off everywhere

Note

• All sections stack automatically on mobile.
• You can give some sections a different child width for tablet, so they stack or don’t stack
• You can disable each section and child section per device or condition; the design will adjust instantly and automatically
• The complete list view of this design is shown in the documentation.
• Just remember: our section block can be used as a parent and a child, and can be both at the same time.