initial commit

1 files changed, 199 insertions, 0 deletions

diff --git a/files/ja/web/css/grid/index.html b/files/ja/web/css/grid/index.html
new file mode 100644
index 0000000000..50c4b368e6
--- /dev/null
+++ b/files/ja/web/css/grid/index.html
@@ -0,0 +1,199 @@
+---
+title: grid
+slug: Web/CSS/grid
+tags:
+  - CSS
+  - CSS グリッド
+  - CSS プロパティ
+  - Reference
+  - grid
+  - grid-auto-columns
+  - grid-auto-flow
+  - grid-auto-rows
+  - grid-template-areas
+  - grid-template-columns
+  - grid-template-rows
+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>
+
+<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 明示的なグリッドプロパティ、<em>または</em>暗黙のグリッドプロパティのみを単一の <code>grid</code> 宣言で設定することができます。指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、 gutter プロパティはこの一括指定では初期化されません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* &lt;'grid-template'&gt; 値 */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+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: 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 */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* グローバル値	 */
+grid: inherit;
+grid: initial;
+grid: unset;
+</pre>
+
+<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>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container &gt; 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>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<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 class="Quick_links" 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>