CSS layout cookbook 这本书 旨在汇集通用的布局样式的诀窍，这些布局你可能在自己的网站中会用到。除了提供可以在你的项目中作为starting point使用的代码，它还强调了使用布局规范的不同方式，以及作为开发人员可以做出的选择。
Note: 如果你是首次接触这本书，你可以先看一下CSS layout learning module，它会给你你需要在这里使用的recipes的基础理解
The Recipes
| Recipe | Description | Layout Methods |
|---|---|---|
| Media objects | 一个两栏的框，一边是图片，另一边是描述性文字，例如facebook上的帖子或推特。 | CSS Grid, float fallback, fit-content sizing |
| Columns |
在什么时候选择multi-column layout,flexbox或者grid |
CSS Grid, Multicol, Flexbox |
| Center an element |
如何水平或者垂直居中一个item |
Flexbox, Box Alignment |
| Sticky footers |
创建一个页脚，当内容较短时，该页脚位于容器或视图的底部。 |
CSS Grid, Flexbox |
| Split navigation |
一种导航模式，里面的一些links显示的区分于其他 |
Flexbox, margin |
| Breadcrumb navigation |
创创建链接列表，允许访问者在页面层次结构中向上导航。 |
Flexbox |
| List group with badges |
一个带有count计数的徽章的items列表 |
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 this page for a template and guidelines for writing your own example.