2021/11/30 時点の英語版に同期

1 files changed, 88 insertions, 144 deletions

diff --git a/files/ja/web/css/grid/index.md b/files/ja/web/css/grid/index.md
index 6b5a8f0d1f..5994d637fa 100644
--- a/files/ja/web/css/grid/index.md
+++ b/files/ja/web/css/grid/index.md
@@ -5,29 +5,36 @@ tags:
   - CSS
   - CSS グリッド
   - CSS プロパティ
-  - Reference
-  - grid
-  - grid-auto-columns
-  - grid-auto-flow
-  - grid-auto-rows
-  - grid-template-areas
-  - grid-template-columns
-  - grid-template-rows
+  - リファレンス
+  - recipe:css-shorthand-property
+browser-compat: css.properties.grid
 translation_of: Web/CSS/grid
 ---
-<p>CSS の <strong><code>grid</code></strong> プロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、明示的なすべてのグリッドプロパティ ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}) と、暗黙のすべてのグリッドプロパティ ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}) を単一の宣言で設定します。</p>
+{{CSSRef}}
 
-<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div>
+**`grid`** は CSS のプロパティで、[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)として明示的・暗黙的なすべてのグリッドプロパティを単一の宣言で設定します。
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+`grid` を使用すると、一方の軸を {{cssxref("grid-template-rows")}} または {{cssxref("grid-template-columns")}} を使用して設定し、もう一方の軸でどのように内容物を自動反復させるかを、暗黙のグリッドプロパティである {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}} で設定します。
 
-<div class="note">
-<p><strong>メモ:</strong> 明示的なグリッドプロパティ、<em>または</em>暗黙のグリッドプロパティのみを単一の <code>grid</code> 宣言で設定することができます。指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、 gutter プロパティはこの一括指定では初期化されません。</p>
-</div>
+{{EmbedInteractiveExample("pages/css/grid.html")}}
+
+> **Note:** 指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、溝に関するプロパティはこの一括指定では初期化されません。
+
+## 構成要素のプロパティ
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<pre class="brush: css no-line-numbers">/* &lt;'grid-template'&gt; 値 */
+- [`grid-auto-columns`](/ja/docs/Web/CSS/grid-auto-columns)
+- [`grid-auto-flow`](/ja/docs/Web/CSS/grid-auto-flow)
+- [`grid-auto-rows`](/ja/docs/Web/CSS/grid-auto-rows)
+- [`grid-template-areas`](/ja/docs/Web/CSS/grid-template-areas)
+- [`grid-template-columns`](/ja/docs/Web/CSS/grid-template-columns)
+- [`grid-template-rows`](/ja/docs/Web/CSS/grid-template-rows)
+
+## 構文
+
+```css
+/* <'grid-template'> 値 */
 grid: none;
 grid: "a" 100px "b" 1fr;
 grid: [linename1] "a" 100px [linename2];
@@ -36,15 +43,15 @@ grid: "a" minmax(100px, max-content) "b" 20%;
 grid: 100px / 200px;
 grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
 
-/* &lt;'grid-template-rows'&gt; /
-   [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;? values */
+/* <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? 値 */
 grid: 200px / auto-flow;
 grid: 30% / auto-flow dense;
 grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
 grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
 
-/* [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? /
-   &lt;'grid-template-columns'&gt; values */
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> 値 */
 grid: auto-flow / 200px;
 grid: auto-flow dense / 30%;
 grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
@@ -53,145 +60,82 @@ grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
 /* グローバル値	 */
 grid: inherit;
 grid: initial;
+grid: revert;
 grid: unset;
-</pre>
+```
+
+### 値
+
+- `<'grid-template'>`
+  - : {{cssxref("grid-template")}} を定義し、これには {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}} が含まれます。
+- `<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?`
+
+  - : {{cssxref("grid-template-rows")}} プロパティを明示的に設定 (および {{cssxref("grid-template-columns")}} プロパティを `none` に設定) することで行トラックを設定し、 {{cssxref("grid-auto-columns")}} プロパティを設定 (および {{cssxref("grid-auto-rows")}} を `auto` に設定) することで列トラックの自動反復方法を設定します。 `dense` が設定されていれば、 {{cssxref("grid-auto-flow")}} も `column` に設定されます。
+
+    ほかの `grid` のサブプロパティはすべて、初期値に初期化されます。
+
+- `[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`
+
+  - : {{cssxref("grid-template-columns")}} プロパティを明示的に設定 (および {{cssxref("grid-template-rows")}} プロパティを `none` に設定) することで列トラックを設定し、 {{cssxref("grid-auto-rows")}} プロパティを設定 (および {{cssxref("grid-auto-columns")}} を `auto` に設定) することで行トラックの児童反復方法を設定します。 `dense` が設定されていれば、 {{cssxref("grid-auto-flow")}} も `column` に設定されます。
+
+    ほかの `grid` のサブプロパティはすべて、初期値に初期化されます。
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt><code>&lt;'grid-template'&gt;</code></dt>
- <dd>{{cssxref("grid-template")}} を定義し、これには {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}} が含まれます。</dd>
- <dt><code>&lt;'grid-template-rows'&gt; / [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;?</code></dt>
- <dd>{{cssxref("grid-template-rows")}} プロパティを明示的に設定 (および {{cssxref("grid-template-columns")}} プロパティを <code>none</code> に設定) することで行トラックを設定し、 {{cssxref("grid-auto-columns")}} プロパティを設定 (および {{cssxref("grid-auto-rows")}} を <code>auto</code> に設定) することで列トラックの自動反復方法を設定します。 <code>dense</code> が設定されていれば、 {{cssxref("grid-auto-flow")}} も <code>column</code> に設定されます。
- <p>ほかの <code>grid</code> のサブプロパティはすべて、初期値に初期化されます。</p>
- </dd>
- <dt><code>[ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? / &lt;'grid-template-columns'&gt;</code></dt>
- <dd>{{cssxref("grid-template-columns")}} プロパティを明示的に設定 (および {{cssxref("grid-template-rows")}} プロパティを <code>none</code> に設定) することで列トラックを設定し、 {{cssxref("grid-auto-rows")}} プロパティを設定 (および {{cssxref("grid-auto-columns")}} を <code>auto</code> に設定) することで行トラックの児童反復方法を設定します。 <code>dense</code> が設定されていれば、 {{cssxref("grid-auto-flow")}} も <code>column</code> に設定されます。
- <p>ほかの <code>grid</code> のサブプロパティはすべて、初期値に初期化されます。</p>
- </dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+### グリッドレイアウトの作成
 
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
+#### HTML
 
-<h3 id="CSS">CSS</h3>
+```html
+<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
+
+#### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   display: grid;
   grid: repeat(2, 60px) / auto-flow 80px;
 }
 
-#container &gt; div {
+#container > div {
   background-color: #8ca0ff;
   width: 50px;
   height: 50px;
-}</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Example", "100%", 150)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("css.properties.grid")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>関連する CSS プロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li>
- <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">CSS グリッドでの行ベースの配置</a></em></li>
- <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">グリッドテンプレート領域 - グリッド定義の一括指定</a></em></li>
-</ul>
-
-<section id="Quick_links">
-<ol>
- <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
- <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
- <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
-  <ol>
-   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
-   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
-   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li>
-   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
-   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
-   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
-   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
-   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
-   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
-   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッド及び進歩的な拡張</a></li>
-   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">CSS グリッドを利用したよくあるレイアウトの実現</a></li>
-  </ol>
- </li>
- <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
-  <ol>
-   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
-   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
-  </ol>
- </li>
- <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
-  <ol>
-   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
-   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
-   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
-   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
-   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
-   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
-   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
-  </ol>
- </li>
-</ol>
-</section>
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Creating_a_grid_layout", "100%", 150)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 関連する CSS プロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}
+- グリッドレイアウトガイド: [CSS グリッドでの行ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#グリッド定義の一括指定)