path: root/files/ja/web/css/grid/index.html

---
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>