initial commit

8 files changed, 649 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/zh-cn/web/css/layout_cookbook/breadcrumb_navigation/index.html
new file mode 100644
index 0000000000..9d2b796e42
--- /dev/null
+++ b/files/zh-cn/web/css/layout_cookbook/breadcrumb_navigation/index.html
@@ -0,0 +1,50 @@
+---
+title: 面包屑导航
+slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">面包屑导航通过提供返回起始页面的面包屑轨迹，帮助用户了解他们在网站中所处的位置。</p>
+
+<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p>
+
+<h2 id="要求">要求</h2>
+
+<p>这些项通常以内联方式显示，并带有分隔符，以指示各个页面之间的层次结构。</p>
+
+<h2 id="Recipe">Recipe</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">下载此节的示例</a></p>
+</div>
+
+<h2 id="做出的选择">做出的选择</h2>
+
+<p>这种模式使用一个简单的 flex 布局摆布，展示了一行 CSS 如何为我们提供导航。分隔符是由 CSS 内容生成属性添加的，你也可以将其换成其他想要的分隔符（样式）。</p>
+
+<h2 id="无障碍访问问题">无障碍访问问题</h2>
+
+<p>我使用了 <code>aria-label</code> 和 <code>aria-current</code> 属性来帮助用户理解这个导航的结构，以及当前页面在结构中的位置。 详情请参见相关链接。</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>不同的布局方法，在各种浏览器上的支持情况也不尽相同。有关所使用属性的基本支持的详细信息，请参见下面的图表。</p>
+
+<div class="hidden">
+<p>本页中的兼容性表是由结构化数据生成的。如果您想参与数据贡献，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>，并向我们发送pull请求。</p>
+</div>
+
+<h4 id="Flexbox">Flexbox</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">另请参阅</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS 弹性盒子布局</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">提供面包屑路径</a></li>
+ <li><a href="https://tink.uk/using-the-aria-current-attribute/">使用 aria-current 属性</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/layout_cookbook/center_an_element/index.html b/files/zh-cn/web/css/layout_cookbook/center_an_element/index.html
new file mode 100644
index 0000000000..bf6d5aa1da
--- /dev/null
+++ b/files/zh-cn/web/css/layout_cookbook/center_an_element/index.html
@@ -0,0 +1,51 @@
+---
+title: 居中一个元素
+slug: Web/CSS/Layout_cookbook/Center_an_element
+translation_of: Web/CSS/Layout_cookbook/Center_an_element
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">在这份指南中你将了解到把一个盒子居中放置在另一个之中的方法。在伸缩盒子模型(flexbox)出现之前，要做到同时垂直与水平居中是很困难的，而现在利用盒子对齐属性(Box Alignment)就很直截了当了。</p>
+
+<p><img alt="an element centered inside a larger box" src="https://mdn.mozillademos.org/files/16182/cookbook-center.png" style="height: 421px; width: 1219px;"></p>
+
+<h2 id="需求">需求</h2>
+
+<p>把一个项目同时垂直与水平居中地放置在一个盒子中</p>
+
+<h2 id="指南">指南</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">下载这份示例</a></p>
+</div>
+
+<h2 id="做出选择">做出选择</h2>
+
+<p>要将一个盒子居中放置在另一个之中，我们需要让作为容器的盒子变成伸缩容器。再将 {{cssxref("align-items")}} 设置为 center 来实现块方向的轴(block axis)上的居中，并把 {{cssxref("justify-content")}} 设置为 center 来实现文字方向的轴(inline axis)上的居中。</p>
+
+<p>将来我们可能不需要将父容器设置为伸缩容器就可以居中元素，因为此处使用的“盒子对齐”属性也被指定为适用于块布局。然而，当前在块布局上对盒子对齐属性的支持仍然是有限的，因此目前使用伸缩盒子来实现居中还是最可靠的方法。</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>各种布局方法具有不同的浏览器支持。有关所使用属性的基本支持的详细信息，请参见下表</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="align-items">align-items</h4>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h4 id="justify-content">justify-content</h4>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h2 id="MDN上相关的资源">MDN上相关的资源</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box Alignment in Flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box alignment guide</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/layout_cookbook/column_layouts/index.html b/files/zh-cn/web/css/layout_cookbook/column_layouts/index.html
new file mode 100644
index 0000000000..f402489865
--- /dev/null
+++ b/files/zh-cn/web/css/layout_cookbook/column_layouts/index.html
@@ -0,0 +1,140 @@
+---
+title: Column layouts
+slug: Web/CSS/Layout_cookbook/Column_layouts
+translation_of: Web/CSS/Layout_cookbook/Column_layouts
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<div>你可能经常需要创建一个包含几个栏目的布局，css提供了几个方法来实现它。使用Grid, Flexbox 或者 Multi-column layout 都取决于你想要实现什么目标，在这篇recipe中我们会探讨这些内容</div>
+
+<div></div>
+
+<div><img alt="three different styles of layouts which have two columns in the container." src="https://mdn.mozillademos.org/files/16183/cookbook-multiple-columns.png" style="height: 406px; width: 1541px;"></div>
+
+<h2 id="Requirements">Requirements</h2>
+
+<p>你也许会为你的栏目实现多种设计样式：</p>
+
+<ul>
+ <li>连续的内容线，分成报纸式的专栏</li>
+ <li>被划分成几个高度相等的栏目的一行</li>
+ <li>按行和列排列的多行列</li>
+</ul>
+
+<h2 id="The_recipes">The recipes</h2>
+
+<p>为了达到你的需要你需要选择不同的布局方式</p>
+
+<h3 id="A_continuous_thread_of_content_—_multi-column_layout">A continuous thread of content — multi-column layout</h3>
+
+<p>If you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. The columns must all be the same size, and you are unable to target an individual column or the content of an individual column.</p>
+
+<p>如果你使用多列布局来创建列，则文本会以连续流的形式依次填满每个列。这些列必须大小相同，并且你不能够针对单个列或者单个列的内容</p>
+
+<p>You can control the gaps between columns with the {{cssxref("column-gap")}} property, and add a rule between columns using {{cssxref("column-rule")}}.</p>
+
+<p>你可以使用{{cssxref("column-gap")}} 控制列之间的距离，并且使用{{cssxref("column-rule")}}.增加列之间的规则</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">Download this example</a></p>
+</div>
+
+<p>在以下情况使用多列布局：</p>
+
+<ul>
+ <li>你想要你的文本看起来想报纸那种排版布局。</li>
+ <li>您有一组要分成列的小项目。</li>
+ <li>你不需要单独为指定的列写样式。</li>
+</ul>
+
+<h3 id="A_single_row_of_items_with_equal_heights_—_flexbox">A single row of items with equal heights — flexbox</h3>
+
+<p>Flexbox can be used to break content into columns by setting {{cssxref("flex-direction")}} to <code>row</code>, however flexbox targets the elements inside the flex container and will place each direct child into a new column. This is a different behavior to what you saw with multicol.</p>
+
+<p>Flexbox通过设置 row的{{cssxref("flex-direction")}} ，可以用于将内容分成列， 然而，flexbox的目标是flex容器内的元素，并将把每个直接的子元素放到一个新列中，这是与multicol不同的地方。</p>
+
+<p>There is currently no way to add a rule between flex items, and browser support for the {{cssxref("column-gap")}} and {{cssxref("row-gap")}} properties is limited. Therefore to create gaps between items use a margin.</p>
+
+<p>目前没有办法可以在flex的item中添加规则，而且浏览器对{{cssxref("column-gap")}} 和 {{cssxref("row-gap")}}的支持是有限的，因此使用margin属性来创建item之间的间距</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">Download this example</a></p>
+</div>
+
+<p>Flexbox can also be used to create layouts where the flex items wrap onto new rows, by setting the {{cssxref("flex-wrap")}} property on the container to <code>wrap</code>. These new flex lines will distribute space along that line only — the items in the new line will not line up with items in the line above, as you'll see in the example below. This is why flexbox is described as one-dimensional. It is designed for controlling layout as a row or a column, but not both at the same time.</p>
+
+<p>Flexbox还可以被用来创建 flex items 自动换行的布局，通过给 flex container 设置  {{cssxref("flex-wrap")}} 属性为wrap. 这些新的flex行只会沿该行分配空间——新行中的项不会与上面行中的项对齐,你可以在下面的例子中看到。这就是为什么flexbox被描述为一维。 他是为了将布局控制为行或列，但不是同时控制行和列。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">Download this example</a></p>
+</div>
+
+<p>Use flexbox:</p>
+
+<ul>
+ <li>For single rows or columns of items. 设置一行或者一列中的items</li>
+ <li>When you want to do alignment on the cross axis after laying out your items. 当你想在横轴上对齐您的items</li>
+ <li>When you are happy for wrapped items to share out space along their line only and not line up with items in other lines.</li>
+</ul>
+
+<h3 id="Lining_items_up_in_rows_and_columns_—_grid_layout">Lining items up in rows and columns — grid layout</h3>
+
+<p>If what you want is a layout where items line up in rows and columns then you should choose CSS Grid Layout. Grid Layout works on the direct children of the grid container in a similar way to the manner in which flexbox works on the direct children of the flex container, however with CSS Grid you can line your items up in rows and columns — it is described as two-dimensional.</p>
+
+<p>如果你想要items在行和列进行布局，你应该选择Grid Layout. Grid Layout 作用于 grid container 的 直接子元素类似于 flexbox。 但是你可以在行和列两方面来控制他（flex只能在行或者列）。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">Download this example</a></p>
+</div>
+
+<p>Use Grid:</p>
+
+<ul>
+ <li>For multiple rows or columns of items. </li>
+ <li>When you want to be able to align the items on the block and inline axes.</li>
+ <li>When you want items to line up in rows and columns.</li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The various layout methods have different browser support. See the charts below for details on basic support for the properties used.</p>
+
+
+
+<h4 id="column-width">column-width</h4>
+
+<p>{{Compat("css.properties.column-width")}}</p>
+
+<h4 id="column-rule">column-rule</h4>
+
+<p>{{Compat("css.properties.column-rule")}}</p>
+
+<h4 id="flex">flex</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h4 id="flex-wrap">flex-wrap</h4>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h4 id="grid-template-columns">grid-template-columns</h4>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="Resources_on_MDN">Resources on MDN</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Columns">Guide to Multi-column Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/">Guide to Flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/index.html
new file mode 100644
index 0000000000..37ceeddd92
--- /dev/null
+++ b/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/index.html
@@ -0,0 +1,91 @@
+---
+title: Contribute a recipe
+slug: Web/CSS/Layout_cookbook/Contribute_a_recipe
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">如果您愿意为 Layout Cookbook 贡献示例文件，那么本页将通过阐释步骤指导您发布示例。</p>
+
+<h2 id="好的_recipe_是怎样的">好的 recipe 是怎样的?</h2>
+
+<p><strong>任何有用的 web 设计模式的最简版本。</strong>您 CSS 文件中的每一行代码都应该有助于演示该模式， 省去无用的部分就是为了能让示例显得完美。这种想法就是，某个人既能将这种模式应用在网站中，又可以保持自己的风格。</p>
+
+<h2 id="发布_recipe_的步骤">发布 recipe 的步骤</h2>
+
+<p>一份 recipe 包括以下内容：</p>
+
+<ol>
+ <li>一个动态的示例，存储在 <a href="https://github.com/mdn/css-examples">CSS Examples GitHub repo</a> 之上。</li>
+ <li>这份示例的可供下载版本，同样也存储在 CSS Examples repo 之上。</li>
+ <li>该网站的某个页面在 <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a> 上应详细说明：
+  <ol>
+   <li>要求</li>
+   <li>recipe</li>
+   <li>做出的选择</li>
+   <li>任何有用的反馈或供选择的方法</li>
+   <li>任何无障碍访问问题</li>
+   <li>浏览器兼容性</li>
+   <li>其他资源</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="1._建立自己的模式">1. 建立自己的模式</h3>
+
+<p>在将示例转换为 recipe 之前，先将您的模式创建成为一个简单的 HTML 页面。想想看您要展示的是什么，并使这个想法尽可能简单。避免使用特殊的 CSS 约定（例如 BEM），因为并非每个人都熟悉这些约定，反而会使他们将事情做得看起来要比预期中的更复杂。</p>
+
+<p>确保 HTML 和 CSS 有效，并将其在一种以上的浏览器上进行测试。如果您使用的 CSS 属性并非广受支持，那也没关系！您可以在创建页面时包含浏览器支持信息。在某些情况下，创建示例的第二个版本可能会有帮助，其中包括回退支持。</p>
+
+<h3 id="2._创建一个动态示例">2. 创建一个动态示例</h3>
+
+<p>The live examples that you can see on cookbook pages and elsewhere on MDN allow visitors to play with the code and change relevant parts without being overwhelmed with all of the code needed. You recipe will be demonstrated by way of one or more examples.</p>
+
+<p>Fork the <a href="https://github.com/mdn/css-examples">CSS Examples repo</a> and then take a look in the <code>css-cookbook</code> folder. There is a <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html">cookbook-template.html</a> file you can copy as a starting point. Save this in the css-cookbook directory with a name that makes sense for your pattern. The template is commented to help you add the various parts to the right place.</p>
+
+<p>The important parts of this are as follows.</p>
+
+<p>There is a stylesheet for styles for the editor panels, and some basic body styling, and a JavaScript file included for the editor functionality. Leave these files as they are.</p>
+
+<p>There are two style blocks in the head. The first are for things that a visitor to the page does not need to change to play with the example. The second is for any of the items they might want to play with in the live example. We typically add all of our CSS from like example in the first block, then choose which sets of rules we need to move down to the second block. The rules in the second block should be those that are fundamental to the pattern, perhaps those where a user could make a change to a CSS value and see the pattern update.</p>
+
+<p>You need to add the HTML for your component twice. First inside the section with a class of preview, then inside the textarea <code>playable-html</code>.</p>
+
+<p>Your editable CSS, from the second block in the head, also needs to be copied into the <code>playable-css</code> section.</p>
+
+<p>A simple worked example is <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a>, which is embedded on the page <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Center_an_element">Center an element</a>. You can use this to see how to add the various bits correctly.</p>
+
+<p>If you have forked the repo and therefore have our CSS and JavaScript files alongside your example, if you open up your live example in the browser you should see everything working exactly as it will when included in a page.</p>
+
+<h4 id="Useful_tips">Useful tips</h4>
+
+<ol>
+ <li>Do not indent the CSS and HTML inside the textareas; instead bump it up against the start of the lines. This will look better when it is rendered.</li>
+ <li>If you have any required images, pop them into the directory with the examples. Or you are welcome to use any already there.</li>
+ <li>You can adjust the height of the textareas by changing the height in the inline styles.</li>
+</ol>
+
+<h3 id="3._创建一份可供下载的版本">3. 创建一份可供下载的版本</h3>
+
+<p>As the examples include all of our live example code, we want to offer visitors a simple example without all of that included. Make a copy of your live example with --download appended. For example, center.html, has a download version named <code>center--download.html</code>. This file will be similar to your initial example. It should be a basic version of your pattern as a single HTML page. It can be handy to include the body CSS rules that are in our included stylesheet, if you take a look at <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html">cookbook-template--download.html</a>, these are included as a starting point.</p>
+
+<h3 id="4._用您的示例发起_Pull_请求">4. 用您的示例发起 Pull 请求</h3>
+
+<p>Make a PR on the <a href="https://github.com/mdn/css-examples">CSS Examples repo</a>. This way we can help you with any changes to the example that may be needed before you create your page, plus the example will need to be live to be included some it makes sense to create it first. Include in your PR an explanation of the pattern and what you are demonstrating.</p>
+
+<h3 id="5._创建您的页面">5. 创建您的页面</h3>
+
+<p>Once your example is merged you can create your page. You will need an MDN account to do so with <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions">page creation permissions</a>, and you can then create the page as a subpage of the CSS Cookbook page. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe/Cookbook_template">There is a template for Cookbook pages here</a>.</p>
+
+<p>The template explains what should be part of each section, and you can refer to other cookbook examples for more help. If you click to edit any of those pages then you will be able to see things such as the macros used to embed compat data, and live examples.</p>
+
+<p>If you need general guidance on using the MDN wiki, see the help pages available here.</p>
+
+<p>If you need to ask any questions, or want someone to take a look at your page then the <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse forum</a> is a good place to do this, or <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Synchronous_chat">chat with us on Matrix</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe/Cookbook_template">Cookbook page template</a></li>
+ <li><a href="https://github.com/mdn/css-examples">CSS Examples repo</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/layout_cookbook/index.html b/files/zh-cn/web/css/layout_cookbook/index.html
new file mode 100644
index 0000000000..f8c70e480b
--- /dev/null
+++ b/files/zh-cn/web/css/layout_cookbook/index.html
@@ -0,0 +1,101 @@
+---
+title: CSS Layout cookbook
+slug: Web/CSS/Layout_cookbook
+tags:
+  - CSS
+  - Layout
+  - NeedsTranslation
+  - TopicStub
+  - cookbook
+  - recipes
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}</div>
+
+<div>CSS layout cookbook 这本书旨在汇集常见的布局样式，这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以可以用来开始一个项目，而且提供了具体的使用方法，作为开发人员，你可以做出合适的选择。</div>
+
+<div></div>
+
+<div class="note">
+<p><strong>Note</strong>: 如果你是首次接触CSS布局，你可以先看一下<a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout learning module</a>，书中的基础知识有利于你更好的使用本书中的布局样式。</p>
+</div>
+
+<h2 id="布局样式">布局样式</h2>
+
+<table class="standard-table" style="height: 543px; width: 1188px;">
+ <thead>
+  <tr>
+   <th scope="col">Recipe</th>
+   <th scope="col">Description</th>
+   <th scope="col">Layout Methods</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Media objects</a></td>
+   <td>一个两栏的框，一边是图片，另一边是描述性文字，例如facebook上的帖子或推特</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></td>
+   <td>
+    <p>在什么时候选择multi-column layout,flexbox或者grid</p>
+   </td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></td>
+   <td>
+    <p>如何水平或者垂直居中一个item</p>
+   </td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></td>
+   <td>
+    <p>创建一个页脚，当内容较短时，该页脚位于容器或视图的底部</p>
+   </td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split navigation</a></td>
+   <td>
+    <p>一种导航模式，里面的一些links显示的区分于其他</p>
+   </td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb navigation</a></td>
+   <td>
+    <p>创建链接列表，允许访问者在页面层次结构中向上导航</p>
+   </td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges">List group with badges</a></td>
+   <td>
+    <p>一个带有count计数的徽章的items列表</p>
+   </td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td>
+   <td>链接到内容页面 (比如搜索结果).</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Card">Card</a></td>
+   <td>卡片组件，显示在卡片网格中</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Grid wrapper</a></td>
+   <td>For aligning grid content within a central wrapper, while also allowing items to break out.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribute_a_Recipe">Contribute a Recipe</h2>
+
+<p>As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">See this page</a> for a template and guidelines for writing your own example.</p>
diff --git a/files/zh-cn/web/css/layout_cookbook/split_navigation/index.html b/files/zh-cn/web/css/layout_cookbook/split_navigation/index.html
new file mode 100644
index 0000000000..eb710301fa
--- /dev/null
+++ b/files/zh-cn/web/css/layout_cookbook/split_navigation/index.html
@@ -0,0 +1,48 @@
+---
+title: 分块导航
+slug: Web/CSS/Layout_cookbook/Split_Navigation
+translation_of: Web/CSS/Layout_cookbook/Split_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">一种导航样式，其中一个或多个元素与其余导航项之间是分离的。</p>
+
+<p><img alt="Items separated into two groups." src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p>
+
+<h2 id="需求">需求</h2>
+
+<p>一种常见的导航样式是将一个元素推离其他元素。我们可以使用伸缩盒子(Flexbox)实现这一点，而不需要将两组项目放入两个单独的伸缩容器(flex containers)中。</p>
+
+<h2 id="指南">指南</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html">下载这份示例</a></p>
+</div>
+
+<h2 id="做出选择">做出选择</h2>
+
+<p>这一样式结合了自动外边距(auto margins)与伸缩盒子两种方法来把项目分离开。</p>
+
+<p>自动外边距会吸收其应用方向上的所有可用空间。这就是利用自动外边距实现居中的工作原理—— 块的两侧都有一个试图占用所有空间的空白，从而将块推到了中间。</p>
+
+<p>在这种情况下，左侧的自动边距会占用所有可用空间，并将项目推到右侧。您可以将类<code>push</code>应用到列表中的任何项目上。</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>各种布局方法具有不同的浏览器支持。有关所使用属性的基本支持的详细信息，请参见下表。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="Flexbox">Flexbox</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/layout_cookbook/卡片/index.html b/files/zh-cn/web/css/layout_cookbook/卡片/index.html
new file mode 100644
index 0000000000..260ef3ba54
--- /dev/null
+++ b/files/zh-cn/web/css/layout_cookbook/卡片/index.html
@@ -0,0 +1,82 @@
+---
+title: 卡片
+slug: Web/CSS/Layout_cookbook/卡片
+translation_of: Web/CSS/Layout_cookbook/Card
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">这个模式是带有页脚选项的卡片组件列表。</p>
+
+<p class="summary"></p>
+
+<p><img alt="Three card components in a row" src="https://mdn.mozillademos.org/files/16278/cards.png" style="height: 1172px; width: 1629px;"></p>
+
+<h2 id="要求">要求</h2>
+
+<p>卡片组件可以包含各种内容，包括一个头部(heading)，图片，内容和一个页脚(footer)</p>
+
+<p>每个卡片组件应有相同的高度，并且页脚应该在卡片组件的底部</p>
+
+<p>当添加到卡片组中时，卡片上下应对齐。</p>
+
+<h2 id="使用指南">使用指南</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html">Download this example</a></p>
+</div>
+
+<h2 id="所选方案">所选方案</h2>
+
+<p>卡片布局使用 <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS 网格布局</a>(<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>) despite being a single dimensional layout, as it enables the use of content sizing for the grid tracks. When setting up the single column grid I use the following:</p>
+
+<pre class="brush: css">.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}</pre>
+
+<p>The heading track is set to {{cssxref("max-content")}}, which prevents it from stretching. I have decided that I want my image to live within a track that is 200 pixels tall. I then set the next track — which is where the content lives — to <code>1fr</code>. This means it will take up any additional space. </p>
+
+<p>If the track does have a footer it will be auto-sized, as rows created in the implicit grid are auto-sized by default. Therefore this will fit the content added to it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The various elements in separate cards do not align with each other, as each card is an independent grid. The proposed subgrid feature of Grid Level 2 would give a solution to this issue.</p>
+</div>
+
+<h2 id="Useful_fallbacks_or_alternative_methods">Useful fallbacks or alternative methods</h2>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> could be used to lay out the card, in which case you should make the content area grow, and other items not grow. This would be a reasonable way to lay out the card, although I have a slight preference for being able to control the tracks from the container rather than needing to add rules to the items.</p>
+
+<p>For the overall layout you could use flexbox, however this will result in cards stretching over the final flex row where there are fewer than can fit in the rows above. Alternatively you could use <a href="/en-US/docs/Web/CSS/CSS_Columns">CSS multi-col</a> — this would cause the cards to lay out down the columns, which may or may not be a problem.</p>
+
+<p>See the <a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">columns recipe</a> for demonstrations of each of these layout methods.</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<p>Depending on the content of your card there may be things you could, or should do to enhance accessibility. See <a href="https://inclusive-components.design/cards/">Inclusive Components: Card</a> by Heydon Pickering, for a very detailed explanation of these issues.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The various layout methods have different browser support. See the charts below for details on basic support for the properties used.</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="grid-template-columns">grid-template-columns</h4>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h4 id="grid-template-rows">grid-template-rows</h4>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("grid-gap")}}</li>
+ <li><a href="https://inclusive-components.design/cards/">Inclusive Components: Card</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/layout_cookbook/媒体对象/index.html b/files/zh-cn/web/css/layout_cookbook/媒体对象/index.html
new file mode 100644
index 0000000000..382e4bacce
--- /dev/null
+++ b/files/zh-cn/web/css/layout_cookbook/媒体对象/index.html
@@ -0,0 +1,86 @@
+---
+title: '指南: 媒体对象'
+slug: Web/CSS/Layout_cookbook/媒体对象
+tags:
+  - 媒体对象
+  - 布局
+  - 指南
+  - 浮动
+  - 网格
+translation_of: Web/CSS/Layout_cookbook/Media_objects
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">媒体对象是web上随处可见的一种模式。它由<a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Nicole Sullivan</a>命名，表示一种一侧是图片并且另一侧是描述性的文字的两列盒子，比如一篇facebook帖子或者tweet。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>
+
+<h2 id="要求">要求</h2>
+
+<p>媒体对象模式需要以下特性的一些或者全部：</p>
+
+<ul>
+ <li>在移动设备上被堆叠，在桌面设备上显示两列</li>
+ <li>图片可以在左边，也可以在右边</li>
+ <li>图片可以是小图，也可以是大图</li>
+ <li>媒体对象可以被嵌套</li>
+ <li>无论哪边更高，媒体对象应该清除内容</li>
+</ul>
+
+<h2 id="使用指南">使用指南</h2>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Download this example</a></p>
+</div>
+
+<h2 id="做出选择">做出选择</h2>
+
+<p>我选择使用<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a>实现媒体对象，因为它可以让我在我需要的时候控制两个维度的布局。这意味着当我们有一个页脚（footer）的时候，上面的内容很短，页脚可以被推到媒体对象的底部。</p>
+
+<p>另一个使用网格布局（Grid Layout）的原因是为了可以使用{{cssxref("fit-content")}}图片的追踪（track）大小。通过使用 最大尺寸是200像素的<code>fit-content</code> ，当我们有一个小图片比如icon的时候，track仅仅得到和image的尺寸一样的大小（<code>max-content</code> 大小）。如果图片更大，track在200像素的时候停止增长，因为图片应用了{{cssxref("max-width ")}}为100%。同样，它会缩小以适应列内部的尺寸。</p>
+
+<p>通过使用{{cssxref("grid-template-areas")}} 来实现布局，我可以看到CSS中的这个模式。我定义我的网格，其并且设置最大宽度（max-width）为500像素，因此在较小的设备上媒体对象会被堆叠起来。</p>
+
+<p>模式的一个选项是翻转它将图片切换到另一边——这通过添加<code>media-flip</code> 类来实现，它定义了一个翻转的网格模板所以布局被镜像了。</p>
+
+<p>当我们在另一个媒体对象之中嵌套一个媒体对象，我么你需要将它放到常规布局的第二个track中，当翻转时放到第一个track中</p>
+
+<h2 id="回退方案">回退方案</h2>
+
+<p>对于这种模式有很多种可能的回退方案，取决于你希望支持的浏览器。一个比较号的方案是将图片浮动到左边，并且为盒子添加clearfix来确保它包含浮动元素。</p>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Download this example</a></p>
+</div>
+
+<p>一旦浮动元素成为网格项，浮动将不再被应用到网格上，因此你不需要做任何特殊的事情来清楚浮动。</p>
+
+<p>你需要做的事情是移除应用到这些items的任何边界，以及我们在一个网格上下文中不需要的任何宽度（在网格中我们有{{cssxref("gap")}}属性来控制它，并且track控制了尺寸）。</p>
+
+<h2 id="MDN上相关的资源">MDN上相关的资源</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Progressive Enhancement and Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Using Grid Template Areas</a></li>
+ <li><a href="/en-US/docs/Web/CSS/fit-content">fit-content</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid-template-areas</a></li>
+</ul>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>.各种各样的布局方法有不同的浏览器支持。查看下面的图表得到属性的基本支持的细节。</p>
+
+<p>这个页面中的兼容性表格由结构数据生成。如果你想对数据做贡献，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并且给我们发送一个pull request。</p>
+
+<h4 id="grid-template-areas">grid-template-areas</h4>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h4 id="float">float</h4>
+
+<p>{{Compat("css.properties.float")}}</p>