Skip to Content

Make hope louder with your Fall Fundraiser donation!

 

Donate

Grid Layout

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

  1. Add the Grid Layout block to the page which can be found under Layout Elements
  2. 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

  3. 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

Example

1st column of a 3 column grid layout

2nd column of a 3 column grid layout

3rd column of a 3 column grid layout

50/50 Column on a Gray Background row

50/50 Column on a Gray Background row

This site uses cookies to offer you a better browsing experience. A cookie is a small text file containing information that a website transfers to your computer’s hard disk for record-keeping purposes and allows us to analyze our site traffic patterns. It does not contain chocolate chips, you cannot eat it, and there is no special hidden jar.

Accept