BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Grid

MetLife's grid system is based on Bootstrap and is fully responsive from desktop through phone viewports.

Grid Sizes


Grids are designed to hold cards: multiple small containers of information that serve as entry points to more detailed information. A card can fill several columns of the grid and can "flip" and expand across all columns to show more detailed information.

The desktop grid (based on 1200px width) is 12 columns of 70px each, with 15px padding at either side of the viewport and 30px gutters.

Since column widths are fluid (but padding and gutters are fixed widths):

  • • 12 columns for views from 980px and up
  • • 8 columns for views from 979px to 769px
  • • 6 columns from 768px to 421px
  • • Below 420px the grid changes to single column

Desktop container sizes for illustrative purposes:

grid-size

Grid Gutter


Our grid columns have a 15px padding on either side that results in a 30px gutter between columns and a 15px gutter on the grid edges. Even though our columns are fluid, the gutter remains constant.
gutter

Mixed Grid


This layout shows how container sizes can be mixed on a single page (most relevant to marketing sites.)
mix-grid

Servicing Grid


Desktop Grid
mix-grid
Tablet Grid
mix-grid
Mobile Grid
mix-grid