Tiles

Tiles provide a grid of equal-width content slots, extending the listing pattern to allow us to list items across and down a page in chunks. Tiles use a parent element to control the number of tiled children that should fit in each row before wrapping to the next. By providing breakpoint-aware responsive width modifiers, and additional modifiers to control the gutter size between the tiles, we can implement a flexible layout construct that allows for grid-like repeated content without reaching for a grid pattern that delivers full control over individual column widths.

Tiles come into play most frequently with card-based designs and marketing pages constructed out of equally sized chunks of text and images. What’s especially convenient about tiles for these layouts is the simplicity of configuring them to handle responsive breakpoints and wrap fluidly without unintentionally leaking margins outside the parent.

.tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
 
.tiles__tile {
  flex-grow: 0;
  flex-shrink: 0;
  width: 100%; // Defaults to one tile per row for small viewports 
}
 
// Gutter size modifiers: 
 
.tiles--medium {
  margin: -2.4rem 0 0 -2.4rem;
}
 
.tiles--medium > .tiles__tile {
  padding: 2.4rem 0 0 2.4rem;
}
 
// Modifiers for tiles per row: 
 
.tiles--2 > .tiles__tile {
  width: 1 / 2 * 100%;
}
 
.tiles--3 > .tiles__tile {
  width: 1 / 3 * 100%;
}
 
.tiles--4 > .tiles__tile {
  width: 1 / 4 * 100%;
}
 
@media (min-width: $BREAKPOINT_SMALL) {
  .tiles--1\@small > .tiles__tile {
    width: 100%;
  }
 
  .tiles--2\@small > .tiles__tile {
    width: 1 / 2 * 100%;
  }
 
  .tiles--3\@small > .tiles__tile {
    width: 1 / 3 * 100%;
  }
 
  .tiles--4\@small > .tiles__tile {
    width: 1 / 4 * 100%;
  }
}
<!-- These tiles will stack vertically until the small breakpoint is reached, then will flow three per row: -->
<ul class="tiles tiles--medium tiles--3@small">
  <li class="tiles__tile">
    <div class="box box--gray">...</div>
  </li>
  <li class="tiles__tile">
    <div class="box box--gray">...</div>
  </li>
  <li class="tiles__tile">
    <div class="box box--gray">...</div>
  </li>
</ul>