Skip to main content

CSS Layout cookbook

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

[!NOTE] If you are new to CSS layout then you might first like to take a look at our CSS layout learning module, as this will give you the basic grounding you need to make use of the recipes here.

The Recipes

RecipeDescriptionLayout Methods
Media objectsA two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.CSS grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
ColumnsWhen to choose multi-column layout, flexbox or grid for your columns.CSS grid, Multicol, Flexbox
Center an elementHow to center an item horizontally and vertically.Flexbox, Box Alignment
Sticky footersCreating a footer which sits at the bottom of the container or viewport when the content is shorter.CSS grid, Flexbox
Split navigationA navigation pattern where some links are visually separated from the others.Flexbox, {{cssxref("margin")}}
Breadcrumb navigationCreating a list of links to allow the visitor to navigate back up through the page hierarchy.Flexbox
List group with badgesA list of items with a badge to display a count.Flexbox, Box Alignment
PaginationLinks to pages of content (such as search results).Flexbox, Box Alignment
CardA card component, which displays in a grid of cards.Grid Layout
Grid wrapperFor aligning grid content within a central wrapper, while also allowing items to break out.CSS grid

Contribute a Recipe

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See the guide for adding Layout Cookbook recipes for a template and guidelines for writing your own example.