Group blocks can use custom classes to change the layout.
grid class
You can use the grid class to display the blocks contained in a group in a grid.
Enhanced layout with GRID class added to group block
If you want to include multiple blocks such as titles and paragraphs in the grid, select them all to create child blocks or column blocks.
You can add a block width class to a child block to create a grid of 2-5 columns
The width class can use the following values
- size1of2
- size1of3
- size2of3
- size1of4
- size3of4
- size1of5
- size2of5
- size3of5
- size4of5
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
You can add a block height class to a child block to create a grid with 2-5 columns
The height class can use the following values:
- vh25
- vh50
- vh75
- vh100
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit
NOte
If you want to display a 3rd party block that does not have wp-block-xxx class as a grid, you can add the grid-child class to the block