Demos

• Simple Layout

  Simple horizontal and vertical grids, with easy vertical alignment.

• Sticky Footer

  Have the footer stay at the bottom, regardless of how much content you have.

• Holy Grail Layout

  A simpler solution for the Holy Grail Layout.

• Email App

  A three-column email app layout.

How to use

Basic layouts

GridLayout is built using display: table, so you don't have to specify an exact cell size.

If you don't set cell sizes, they will be evenly sized.

<div class="gl">
  <div class="gl-cell">...</div>
  <div class="gl-cell">...</div>
</div>

Vertical layout

You can also do vertical layouts, using the gl-vertical class on the grid container.

Vertical layouts will take up the entire height of their container.

<div class="gl gl-vertical">
  <div class="gl-cell">...</div>
  <div class="gl-cell">...</div>
</div>

Media queries

The breakpoints used in GridLayout are:

• Small (sm): all screen sizes.
• Medium (md): any screen 640px or wider.
• Large (lg): any screen 1024px or wider.

By default, the grid will show up on medium (640px or wider) screens.

If you want the grid to show up on any screen size, use the gl-sm class.

<div class="gl gl-sm">
  ...

Column sizing

GridLayout provides a 12-column responsive grid that you can use on both horizontal and vertical grids.

On horizontal grids the size is the width, while on vertical grids the size is the cell height.

The class names contain the media query breakpoint and the size.

• Use gl-sm-1 through gl-sm-12 to size cells on any screen size. If you want the cells to show up small screens, make sure the grid container has the gl-sm class.
• Use gl-md-1 through gl-md-12 for cell sizes on medium screens.
• Use gl-lg-1 through gl-lg-12 for cell sizes on large screens.

<div class="gl">
  <div class="gl-cell gl-md-4 gl-lg-2">...</div>
  <div class="gl-cell gl-md-8 gl-lg-10">...</div>
</div>

You can also manually set a cell size with CSS, and the other cells without a size set will automatically resize.

Nesting

You can easily nest grids, just make sure you include the gl grid container.

<div class="gl gl-vertical">
  <div class="gl-cell">


    <div class="gl">
      <div class="gl-cell">...</div>
      <div class="gl-cell">...</div>
    </div>

  </div>
  <div class="gl-cell">...</div>
</div>

To make a grid to take up the full height of its container, use the gl-fill class.

<div class="gl">
  <div class="gl-cell">
    <div class="gl gl-fill">
    ...

Scrollviews

By default, the cells will expand to fit their contents.

To have fixed cell sizes, and have the content scroll, you can use the scrollview.

Because of cross-browser concerns, the scrollview requires two containers.

<div class="gl">
  <div class="gl-cell">

    <div class="gl-scrollview"
      <div class="gl-scrollview-content">
        ...
      </div>
    </div>

  </div>
</div>

Full height children

To have a full-height child element in a gl-cell without using a scrollview (eg. as with sticky footers) use the gl-fill class, instead of height: 100%, on the child element.

This helps the IE support script find your element and size it correctly, because IE doesn't pass the correct height to gl-cell children.

Because of Firefox issues with passing height to child elements without having a specific height set on the parent, you also have to use the gl-fill class on the parent gl-cell.

<div class="gl">
  <div class="gl-cell gl-fill">
    <div class="gl-fill">
      Full Cell Height Container
    </div>
  </div>
</div>

Vertically aligning content

You can align content vertically inside cells using the gl-align-middle and gl-align-bottom classes.

<div class="gl">
  <div class="gl-cell gl-align-middle">...</div>
  <div class="gl-cell gl-align-bottom">...</div>
</div>