Recipe Index Grids
Previously, I discussed the six common elements that make up a Recipe Index page. Today, I’ll show some examples of using grids on a Recipe Index page.
Many food bloggers do not have a sidebar on this page, which provides more room for the grid. Typically, you’ll see 3-6 images per row.
The number per row is usually determined by the number of items in the grid. If you don’t have too many, then you can have fewer images per row.
These can either be photos and/or icons with links to collections of recipes, or recipes themselves. Grid images can be squares, rectangles, or circles in shape. Grids can feel overwhelming if there are many choices, or if the items are not in an intuitive order.
Each item in the grid will have an image, title (the name of the category or recipe), and link to the appropriate page. Other details can be included for each image too, such as a label for a subcategory, time to make the recipe, star rating, or date. You don’t want to overwhelm people with too much information in these grids.
You also need to decide what to do about the final row where there may not be enough items to fill it up completely. Either you can center it or have a gap on the right.
Here are some examples with increasing numbers of items per row. Notice how each has slightly different details too, such as the shape, category, icon, and rating.