Common UI Patterns

As Grid Layout moves towards shipping I’m creating a number of more complete patterns demonstrating how we might use Grid Layout along with other layout methods, as an enhancement or for small UI elements rather than full designs.

• Hero Image Panel

  

  A panel with neatly lined up blocks yet still enabling additional content to be added to any block.

• Listing with thumbnails

  

  A listing which has thumbnails, displayed at three breakpoints. Grid with flexbox and float fallbacks.

• List of thumbnails with section titles

  

  A listing which has thumbnails plus section titles, displayed at three breakpoints. Grid with flexbox and float fallbacks.