Block Grids

Block grids are ul with two-up, three-up, four-up and five-up styles. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.

By default, these blocks will stay in their N-up configuration on mobile devices, but you can add a class of "mobile" to have them reshuffle on smartphones into one element per line, just like the grid. If you want to use a different layout for mobile, say .five-up for large screens and .three-up for small devices, you can simply use classes like, .mobile-three-up.

Two-up
  • Two-up element
  • Two-up element
  • Two-up element
  • Two-up element
  • Two-up element
Three-up
  • Three-up element
  • Three-up element
  • Three-up element
  • Three-up element
  • Three-up element
Four-up (Mobile)
  • Four-up element
  • Four-up element
  • Four-up element
  • Four-up element
  • Four-up element
  • Four-up element
Five-up
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element

Switch Template