Layout

Grid-based layouts of block-level elements

Example

Open example in a new window

Code sample

<div class="layout">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 1">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 2">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 3">
</div>

Notes

  • The minimum width of any column is 200 pixels. Make sure your content works at this small size.
  • The number of items is determined by the number of child elements added to the .layout element.
  • All layouts default to a single column at smaller screen sizes
  • Choose the number of columns based on the fixed number of items. e.g. 4-columns for 4, 8, 12, etc. items.
  • Avoid having 'orphaned' items in these layouts, i.e. one item on a row in a multi-column layout. 2 or more items in a row is fine, but they'll be left-aligned by default.
  • For tricky numbers of items, e.g. 7, then use a 4-column layout, rather than a 3-column layout.
  • 4-column layouts will switch to 2-column layouts at intermediate breakpoints.
  • When adding content such as Cards to layouts:
    • add them as direct children of the .layout element.
    • make sure they share the same number of content items per card. e.g. all have a heading, content, and call-to-action element.
    • make sure all Product and Image cards have the same ratio-sized images (This doesn't matter so much in Plain cards).

Details

Pattern scope:
Organism – A superset of molecules and atoms, often includes behaviour
Relevant assets:
Stylesheets:

Variants

  • Columns: 2 

    A grid layout of 2 columns, with more dedicated space for items at larger screen sizes.

    Example

    Open type in a new window

    Code sample

    <div class="layout" data-columns="2">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 1">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 2">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 3">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 4">
</div>

    Notes

    • Even-numbered column layouts with 4 or more columns will switch to this 2-column layout at intermediate breakpoints.
    • This layout is ideal for an even number of items that need more space per item.
  • Columns: 3 

    A grid layout of 3 columns, with less dedicated space for items at larger screen sizes.

    Example

    Open type in a new window

    Code sample

    <div class="layout" data-columns="3">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 1">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 2">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 3">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 4">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 5">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 6">
</div>

    Notes

    • As soon as space allows (large screen sizes) this layout will switch to 3 columns from the default single column.
    • This layout is ideal for items numbering 3, 5, 6, 9, 11, 12, 14, 15, and so on.
  • Columns: 4 

    A grid layout of 4 columns, with the smallest dedicated space for items at larger screen sizes.

    Example

    Open type in a new window

    Code sample

    <div class="layout" data-columns="4">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 1">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 2">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 3">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 4">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 5">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 6">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 7">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 8">
</div>

    Notes

    • As soon as space allows (intermediate breakpoints) this layout will switch to 2 columns from the default single column.
    • At larger breakpoints it will jump up to 4 columns.
    • This layout is ideal for items numbering 4, 7, 8, 11, 12, 16, and so on.
  • Gap: none 

    Remove any gap between items in the grid

    Example

    Open type in a new window

    Code sample

    <div class="layout" data-gap="none" data-columns="2">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 1">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 2">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 3">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 4">
</div>
  • Gap: small 

    Creates a small gap between items in the grid

    Example

    Open type in a new window

    Code sample

    <div class="layout" data-gap="small" data-columns="2">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 1">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 2">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 3">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 4">
</div>
  • Gap: large 

    Creates a large gap between items in the grid

    Example

    Open type in a new window

    Code sample

    <div class="layout" data-gap="large" data-columns="2">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 1">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 2">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 3">
  <img src="https://placehold.co/600x600/000000/FFFFFF/webp" alt="Item 4">
</div>

    Notes

    This gap is only visible at intermediate screen sizes or larger.