UI cheat sheet: list vs grids

Grids or lists? That is the question we will look at in this cheat sheet. While they can be used anywhere in your site, we are going to look primarily at search results, catalogs and newsfeeds. Making this choice will determine how your users interact with your content and what they will engage with.

In this cheat sheet we will cover the following:

1. Introduction

1. The difference between grids and lists
2. What mode your user is in and what is most important to them
3. Working with images
4. Cognitive load

2. Grid view

1. What a grid looks like
2. Standard grid
3. Masonry grid
4. Justified grid
5. Best practices for grids

3. List view

1. What a list looks like
2. Simple list
3. List with horizontal stacking
4. List with vertical stacking
5. Best practises for lists

4. Result or item styles

1. Skeuomorphic/elevated cards
2. Outlined cards
3. Flat