Community Documentation

Groundwork columns per region

Last updated January 22, 2012. Created by JohnNoc on January 14, 2012.
Log in to edit this page.

When designing block layouts in Groundwork, you must always take note of how many columns the region where you will place the block can hold.

If you do not assign a number of columns to your block, it will default to the full width of the region.

Columns per region
Region Columns
Top Bar 24
Header 12
Navigation Bar 24
Billboard 24
Highlighted 24
Main Content (with 2 sidebars) 12
Main Content (with sidebar first) 16
Main Content (with sidebarsecond) 20
Main Content (with no sidebars) 24
Sidebar First 8
Sidebar Second 4
Aside * 5
Appendix 24
Supplement 24
Footer 24

* The Aside region is a special region shown only in node pages. It always has a width of 180px (5 columns).

Example:
If you wish to have a layout with 3 blocks side by side of each other (like in the footer region in Groundwork's demo site), it is important to note that the region can hold 24 columns. You will then configure your blocks as follows:

24 columns / 3 = 8 columns per block

  • Block One (Farthest left)
    • Width: 8 columns
    • Gutter: Remove left gutter
    • Prefix: none
    • Suffix: none
  • Block Two (Middle)
    • Width: 8 columns
    • Gutter: Don't remove any gutter
    • Prefix: none
    • Suffix: none
  • Block Three (Farthest right)
    • Width: 8 columns
    • Gutter: Remove right gutter
    • Prefix: none
    • Suffix: none