The Grid Layout block allows editors to create rows container 1-6 columns of varying widths depending on the amount of columns declared in the row. Each column will be displayed as a block region in the page editor where text or component blocks can be placed.
How to Use
- Add the Grid Layout block to the page which can be found under Layout Elements
- Click on the outer Grid Layout block outline (the dotted line surrounding the columns regions) to bring up the Grid Layout options:
- Number of Columns: The amount of columns to display in the row, each column will contain a block region in which blocks can be placed
- Column Layouts: Depending on the Number of Columns selected, a selection of column width variations will be available to choose from here
- Row Style: Selection of options to style the row
- None: No additional styles, plain row
- Gray Background: Adds a light gray background color to the row
- White to Gray Gradient Background: Adds a white to gray gradient to the row, white at the top fading to gray at the bottom
- Purple Background: Adds a purple background color to the row
- Gray Border: Adds a gray border around the row
- Vertically Center: By default, the columns of the row will all stretch to be equal heights, toggling this option will maintain column height of the contents within and vertically center each column in the row
- Reverse Layout: By default, columns will stack vertically on mobile devices with the left column being first and each subsequent column under it, toggling this option will reverse that order and display the right most column first on mobile devices and each column moving left will display next
- Gutter: Toggling this option will remove the spacing between columns
- Once the Grid Layout block is applied to the page and the Number of Columns and Column Layout are set, those columns with block regions will appear in the page editor for each column, text or blocks can be added to each of these block regions as desired