CSS Layout cookbook

The MDN 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

Recipe Description Layout Methods
Media Object A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. CSS Grid, float fallback, fit-content() sizing

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 this page [TO DO] for a template and guidelines for writing your own example.

Document Tags and Contributors

Contributors to this page: chrisdavidmills, rachelandrew
Last updated by: chrisdavidmills,