Mai Columns Block
Mai Columns block is a powerful and extremely versatile columns block. We found the core WP columns block was too limiting and set out to build the most flexible columns block available for WordPress.
This block includes responsive columns control, custom arrangements, and different arrangements for different screen sizes.
This block actually contains 2 blocks. Mai Columns is the main container block with overall controls, and Mai Column is each individual item that contains it's own controls.
Make sure you read and understand the Custom Responsive Arrangements section to fully understand the power and flexibility of Mai Columns block.
How To Use
- Create or edit the page or post that you'd like to use Mai Columns.
- Add Mai Columns block to the page.
- Edit the columns settings in the block sidebar.
- Add additional columns/items by making sure the main Mai Columns block is highlighted then clicking the plus (+) to add a new Mai Column Item block.
- Optionally edit each column item settings individually.
- Save/update and view your page.
Mai Columns Screenshots
Mai Columns Settings
Columns
Sets the number of columns on larger desktop screens.
Available options:
- 1
- 2
- 3
- 4
- 5
- 6
- Auto / Fit Content - Makes each column width the size of the content inside each item.
- Custom Arrangement - Full control over the columns sizes and arrangement at each screen size.
Custom Responsive Arrangements
Custom arrangements is probably the most powerful feature of Mai Columns. Set the arrangement for one or more items and rows. The entire arrangement will repeat in the sequence you set here. Only set one value if you want all columns to be the same.
Make sure you set the arrangement for every breakpoint via the screen size tabs here.
Default options:
- 1/4
- 1/3
- 1/2
- 2/3
- 3/4
- Auto / Fit Content - Makes each column width the size of the content inside each item.
- Fill Space - Fills the remaining space based on the other items in the row. If you have only one other column and it's set to 1/4, this column will fill the space and automatically become 3/4.
- Full Width - Fills the entire row.
Additional options after clicking "More options":
- 1/12
- 1/8
- 1/6
- 1/5
- 3/8
- 2/5
- 3/5
- 5/8
- 4/5
- 5/6
- 7/8
- 11/12
Align Columns
Align the column containers themselves. This does not affect the content inside each item. This is only relevant when you don’t have enough entries to fill up the last row. If you have 3 columns, but only 8 entries, the last 2 will align left, center, or right, depending on this setting.
Align Columns (vertical)
Vertical alignment for the items. This is most noticeable when displaying entries with a different amount of content in them. Most of the time, this setting won’t be needed.
Column & Row Gap
The amount of space you want between your columns and rows.
Top Margin
The amount of top margin (spacing) on the entire columns container.
Bottom Margin
The amount of bottom margin (spacing) on the entire columns container.
Mai Column Screenshots
Mai Column Settings
These are the settings for each column/item inside the main block.
Align Content (vertical)
Vertical alignment for the content inside the column item.
Spacing
The padding/spacing for the content inside the column item.
Background Color
The color to be used as the background of the column item.
Add box shadow
Adds box shadow around the column item.
Show first on mobile
Shows this item first on mobile. Make sure there aren't multiple items with this setting enabled.
Show first on small tablets
Shows this item first on small tablets. Make sure there aren't multiple items with this setting enabled.
Show first on large tablets
Shows this item first on large tablets. Make sure there aren't multiple items with this setting enabled.