Drupal Lite: Use Layout Tables

When building your Drupal Lite site, you may want to display content in a grid layout. Instead of adding a traditional HTML table element (where one would manually add specific rows and columns) to the page, use the Layout Table feature to create a responsive grid for your content that dynamically adjusts to the screen size and content.

Note: Layout Table module must be enabled by Drupal Admins. Please submit Drupal Support Request form to have this feature enabled. 

Adding a Layout Table

  1. Log in to your site.
  2. Find the page you want to edit.
  3. Click the Customize This Page button at the bottom of the screen.
     the customize this page button
  4. Click the Add New Pane button Add%20Pane%20Button.pngx in any of the regions (the regions are denoted with blue boxes).
  5. To open the pane editors, select Add a layout table from the sidebar.
    • Note: Each editor represents one cell, or set of content that should remain together.
      Add custom content menu. "Add a layout table" is highlighted.
  6. To display a title for the layout table, enter text into the Title field.
    • Note: Leaving this blank will display the layout table without a title.
  7. Enter your content for the first cell.
  8. Click the Add another item button below the editor to add more cells.
    • Note: You can add as many cells as you wish, but you must have at least one.
  9. Click Save.
  10. You will be brought back to the Customize this Page display.
  11. Click Save again.

Editing an Existing Layout Table

  1. Click Customize this Page.
  2. On the pane where your layout table is, click the Edit button Drupal Edit cogwheel icon. above it
  3. Make any changes. You can edit individual cell content, remove cells, add cells or rearrange their order.
  4. When finished, click Save.
  5. You will be reverted back to the Customize this Page display. Click Save again.

Additional Information

After you click save, you will need to refresh the page in order to see the automatic resizing. When on the Customize this Page display, the resizing will not be in effect and content may not appear as it will to your site visitors; this is expected.

The Drupal Lite layout table automatically resizes cells to display in equal sized areas of space, based on the largest height and width of all of the collected content. Each layout table is independent from one another. If you have multiple layout tables on one page, the sizing of the grid will be calculated separately for each individual table.

Drupal Lite layout table. The display contains 4 cells of equal area.