| CARVIEW |
Select Language
HTTP/2 200
x-guploader-uploadid: AAwnv3Kb_lHrKeCxW_bVfqQwknHOthjnNaJrua6oRrGrDKGhnDumao8gs6DvzuhxG_51i8UP
x-goog-generation: 1760058403438673
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 247831
x-goog-meta-goog-reserved-file-mtime: 1760056669
x-goog-hash: crc32c=l4PJjA==, md5=ezSZ/3Ach6kK5FY9hGBU6A==
x-goog-storage-class: STANDARD
accept-ranges: none
expires: Sat, 11 Oct 2025 09:08:11 GMT
cache-control: public, max-age=3600
last-modified: Fri, 10 Oct 2025 01:06:43 GMT
etag: W/"7b3499ff701c87a90ae4563d846054e8"
content-type: text/html
age: 0
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 29504ebe010fff38a59a015c258601f2
date: Sat, 11 Oct 2025 08:08:11 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
CSS layout cookbook - CSS | MDN
Toggle sidebar
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
| Recipe | Description | Layout Methods |
|---|---|---|
| Media objects | 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 |
| Columns | When to choose multi-column layout, flexbox or grid for your columns. | CSS grid, Multicol, Flexbox |
| Center an element | How to center an item horizontally and vertically. | Flexbox, Box Alignment |
| Sticky footers | Creating a footer which sits at the bottom of the container or viewport when the content is shorter. | CSS grid, Flexbox |
| Split navigation | A navigation pattern where some links are visually separated from the others. | Flexbox, margin |
| Breadcrumb navigation | Creating a list of links to allow the visitor to navigate back up through the page hierarchy. | Flexbox |
| List group with badges | A list of items with a badge to display a count. | Flexbox, Box Alignment |
| Pagination | Links to pages of content (such as search results). | Flexbox, Box Alignment |
| Card | A card component, which displays in a grid of cards. | Grid Layout |
| Grid wrapper | For 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.