Skip to content

Grids and Layouts

Common HTML Page Structures

Page layouts typically follow this combinations of g-site-wrapper, g-wrapper, g-layout & g-layout-item elements.

<body class="g-site-wrapper">
    <header class="g-wrapper g-wrapper--flush g-wrapper--full">
        <div class="g-layout">
            <div class="g-layout__item u-width-10 u-offset-1">
                Top Content
            </div>
        </div>
    </header>
    <main class="g-wrapper">
        <div class="g-layout g-layout--row-reverse">
            <div class="g-layout__item u-width-8">
                Main Right Content
            </div>
            <div class="g-layout__item u-width-4">
                Extra Left Content
            </div>
        </div>
    </main>
    <footer class="g-wrapper g-wrapper--flush g-wrapper--full">
        <div class="g-layout u-grids-4">
            <div class="g-layout__item">
                Left Content
            </div>
            <div class="g-layout__item">
                Middle Content
            </div>
            <div class="g-layout__item">
                Right Content
            </div>
        </div>
    </footer>
</body>

Wrapper

Wrappers are used as the top-most page-layout classes to set max-widths.

  • .g-wrapper can be used to constrain the container to the maximum site width variable while including the right and left padding.
  • Add .g-wrapper--full to .g-wrapper to set it to 100vw.
  • Add .g-wrapper--wide to .g-wrapper to set it to 120rem (default is 100rem).

Layouts

A set of flex-grid layout classes that can be combined with grid & width classes to create fluid and responsive page layouts.

  • .g-layout is the outer block class which adds offsets to counter the outer gutters. (.g-layout is used similarly to the .row classes found in other frameworks.)
  • .g-layout__item is the element used for layout items which sets gutter spacing and essential styling. (.g-layout__item is used similarly to .col classes in other frameworks.)

Note

All direct child elements of .g-layout must be .g-layout__item elements.

<div class="g-layout">
    <div class="g-layout__item">
        <div>Some Content</div>
    </div>
    <div class="g-layout__item">
        <div>Some More Content</div>
    </div>
    <div class="g-layout__item">
        <div>Still More Content</div>
    </div>
</div>

Layouts Gutters

g-layout--flush

Remove the gutters between items.

<div class="g-layout g-layout--narrow">
    <div class="g-layout__item">
        <div>Some Content</div>
    </div>
    <div class="g-layout__item">
        <div>Some More Content</div>
    </div>
    <div class="g-layout__item">
        <div>Still More Content</div>
    </div>
</div>

g-layout--narrow

Have smaller gutters between items.

<div class="g-layout g-layout--narrow">
    <div class="g-layout__item">
        <div>Some Content</div>
    </div>
    <div class="g-layout__item">
        <div>Some More Content</div>
    </div>
    <div class="g-layout__item">
        <div>Still More Content</div>
    </div>
</div>

g-layout--wide

Have larger gutters between items.

<div class="g-wrapper g-wrapper--wide">
    <div class="g-layout g-layout--wide">
        <div class="g-layout__item">
            <div>Some Content</div>
        </div>
        <div class="g-layout__item">
            <div>Some More Content</div>
        </div>
        <div class="g-layout__item">
            <div>Still More Content</div>
        </div>
    </div>
</div>

Note

Using this gutter layout will require that you add the g-wrapper--wide class to the parent g-wrapper container. If not, this will create a horizontal scroll on smaller screen sizes.

Other Modifiers

g-layout--spaced

Include vertical gutters on layout items

<div class="g-layout g-layout--spaced">
    <div class="g-layout__item">
        <div>Some Content</div>
    </div>
    <div class="g-layout__item">
        <div>Some More Content</div>
    </div>
    <div class="g-layout__item">
        <div>Still More Content</div>
    </div>
</div>

g-layout--row-reverse

Will reverse the display order of the child .g-layout__item elements

<div class="g-layout g-layout--row-reverse">
    <div class="g-layout__item">
        <div>Some Content</div>
    </div>
    <div class="g-layout__item">
        <div>Some More Content</div>
    </div>
    <div class="g-layout__item">
        <div>Still More Content</div>
    </div>
</div>

g-layout--column

Will display the child .g-layout__item elements in a stacked list.

<div class="g-layout g-layout--column">
    <div class="g-layout__item">
        <div>Some Content</div>
    </div>
    <div class="g-layout__item">
        <div>Some More Content</div>
    </div>
    <div class="g-layout__item">
        <div>Still More Content</div>
    </div>
</div>

g-layout--column-reverse

Will display the child .g-layout__item elements in a stacked list and display them in reverse order.

<div class="g-layout g-layout--column-reverse">
    <div class="g-layout__item">
        <div>Some Content</div>
    </div>
    <div class="g-layout__item">
        <div>Some More Content</div>
    </div>
    <div class="g-layout__item">
        <div>Still More Content</div>
    </div>
</div>

Grids, Widths, & Offsets

A set of utility classes allow you to specify the widths & offsets of .g-layout__item elements.

The classes will be created based on the $column_count & $breakpoint_shortcodes variables in _varaiibles.scss.

Widths

Specify the number of columns that an .g-layout__item should occupy.

Class Pattern: - u-width-[Column Count]

The "Column Count" numbers will range from 1 to the value of the $column_count variable of the _variables.scss file. ($column_count defaults to 12)

<div class="g-layout">
    <div class="g-layout__item u-width-2">
        <div>Some Content</div>
    </div>
    <div class="g-layout__item u-width-3">
        <div>Some More Content</div>
    </div>
    <div class="g-layout__item u-width-7">
        <div>Still More Content</div>
    </div>
</div>

Responsive Widths

Widths can also be restricted to be active at different breakpoints.

  • Class Pattern: u-width-[Column Count]--[Breakpoint Shortcode]

The "Breakpoint Shortcode" will correspond to the map-values of the $breakpoint_shortcodes variable in the _variables.css file. The default values will be: s, m, l, xl, xxl.

For example, you can specify that an .g-layout__item should occupy 12 columns on the xs-breakpoint and six columns on the large breakpoint:

<div class="g-layout">
    <div class="g-layout__item u-width-12 u-width-6--l">
        <div>Some Content</div>
    </div>
    <div class="g-layout__item u-width-12 u-width-6--l">
        <div>Some More Content</div>
    </div>
</div>

Grids

The .u-grids- utility classes give you the ability to create an automatic number of columns based on the class used; media breakpoints are included.

  • Class Pattern: u-grids-[Column Count]

For example, the following will create a three-column structure in which each column will fluidly fill one-third of the width of the parent with the remainder elements wrapping as needed.

<div class="g-layout u-grids-3">
    <div class="g-layout__item">
        Content 1
    </div>
    <div class="g-layout__item">
        Content 2
    </div>
    <div class="g-layout__item">
        Content 3
    </div>
    <div class="g-layout__item">
        Content 4
    </div>
    <div class="g-layout__item">
        Content 5
    </div>
</div>

Grid Breakpoints

Grids can also be restricted to be active at different breakpoints.

  • Class Pattern: u-grids-[Column Count]-[Breakpoint Shortcode]
  • Class Examples:
    • u-grid-6--s
    • u-grid-4--m
    • u-grid-3--l

For example, we can create a structure in which each column will be 100% width until we enter our medium breakpoint, then they will be one-third the width of the parent container with the remainder elements wrapping as needed.

<div class="g-layout u-grids-1 u-grids-3--m"">
    <div class="g-layout__item">
        Content 1
    </div>
    <div class="g-layout__item">
        Content 2
    </div>
    <div class="g-layout__item">
        Content 3
    </div>
    <div class="g-layout__item">
        Content 4
    </div>
    <div class="g-layout__item">
        Content 5
    </div>
</div>