The Columns block allows to insert various types of content into up to six columns on a WordPress website.
When used one after another, the columns create a grid effect.
Add Columns block
In WordPress dashboard:
- Open post or page in the Editor.
- Click on the Inserter icon to open a list of available blocks.
- Search for the Columns block.
- Click on the block to add it to the content area.
After adding the block, the Editor allows to choose the number of columns to add. It is also possible to change this number to add or remove more columns later.
Customize Columns block
WordPress allows to add or remove columns in the block:
- Use List View to locate the block.
- Select the block.
- Change the number of columns in the sidebar.
You can also customize each individual column in the block.
Responsive break points
By default, the Columns block comes with one responsive break point. When screen width is 782px
then every column in block will have full width.
Custom responsive break points.
At the moment of writing this post, the Block editor does not offer any options for custom break points.
Below is example of custom CSS for modifying default responsive break points in the Columns block:
/* change width of column when screen is 781px and smaller */
@media (max-width: 781px) {
.wp-block-columns.custom-break-points:not(.is-not-stacked-on-mobile) {
--columns: 2;
}
.wp-block-columns.custom-break-points:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: calc((100% / var(--columns)) - var(--wp--style--block-gap) + (var(--wp--style--block-gap) / var(--columns))) !important;
flex-grow: 0;
}
}
/* change width of column when screen is 500px and smaller */
@media (max-width: 500px) {
.wp-block-columns.custom-break-points:not(.is-not-stacked-on-mobile) {
--columns: unset;
}
.wp-block-columns.custom-break-points:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: 100% !important;
}
}
Note, add a custom CSS class to the block in order to make changes. The example above uses custom-break-points
as additional CSS class for the Columns block.