path: root/files/ja/learn/css/css_layout/grids/index.html

---
title: グリッド
slug: Learn/CSS/CSS_layout/Grids
tags:
  - Article
  - Beginner
  - CSS
  - CSS Grids
  - CodingScripting
  - Grids
  - Guide
  - Layout
  - Learn
  - Tutorial
  - grid design
  - grid framework
  - grid system
translation_of: Learn/CSS/CSS_layout/Grids
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div>

<p class="summary"><span class="seoSummary">CSS グリッドレイアウト（Grid Layout）は、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。</span></p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提知識:</th>
   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>と<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>を学ぶ）。</td>
  </tr>
  <tr>
   <th scope="row">学習目標:</th>
   <td>グリッドレイアウトシステムの背後にある基本概念と、CSS グリッドを使用してグリッドレイアウトを実装する方法を理解すること。</td>
  </tr>
 </tbody>
</table>

<h2 id="What_is_grid_layout" name="What_is_grid_layout">グリッドレイアウトとは？</h2>

<p>グリッドとは、水平方向と垂直方向のラインを集めたもので、デザイン要素を並べて表示することができます。 ページ間を移動するときに要素が跳び回ったり幅が変わったりしないようなデザインを作成するのに役立ちます。 これにより、ウェブサイトの一貫性が向上します。</p>

<p>グリッドには通常、列（<strong>column</strong>）、行（<strong>row</strong>）、そしてそれぞれの行と列の間のギャップ（通常はガター（<strong>gutter</strong>）と呼ばれます）があります。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p>

<h2 id="Creating_your_grid_in_CSS" name="Creating_your_grid_in_CSS">CSS でグリッドを作りましょう</h2>

<p>デザインに必要なグリッドを決定したら、CSS グリッドレイアウトを使用して CSS でそのグリッドを作成し、その上に項目を配置できます。 最初にグリッドレイアウトの基本機能を見てから、プロジェクト用のシンプルなグリッドシステムを作成する方法を探ります。</p>

<p>The following video provides a nice visual explanation of using CSS Grid:</p>

<p>{{EmbedYouTube("KOvGeFUHAC0")}}</p>

<h3 id="Defining_a_grid" name="Defining_a_grid">グリッドを定義する</h3>

<p>出発点として、テキストエディタとブラウザーで<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">出発点ファイル</a>をダウンロードして開きます（<a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">ここでライブを見る</a>こともできます）。 いくつかの子項目を持つコンテナの例が表示されます。 デフォルトではこれらは通常フローで表示されるので、ボックスは上下に表示されます。 このレッスンの最初の部分でこのファイルを使用して、グリッドのふるまいを確認するための変更を加えます。</p>

<p>グリッドを定義するために、{{cssxref("display")}} プロパティに <code>grid</code> の値を使います。 フレックスボックスと同様に、これによりグリッドレイアウトがオンになり、コンテナの直接の子すべてがグリッド項目になります。 次のものをファイル内の CSS に追加してください。</p>

<pre class="brush: css notranslate">.container {
    display: grid;
}</pre>

<p>フレックスボックスとは異なり、項目はすぐには違ったようには見えません。 <code>display: grid</code> を宣言すると1列のグリッドになるので、項目は通常フローで表示されるように上下に表示され続けます。</p>

<p>よりグリッドらしく見せるには、グリッドにいくつかの列を追加する必要があります。 ここに 200 ピクセルの列を3つ追加しましょう。 これらの列トラックを作成するために、任意の長さの単位やパーセントを使用できます。</p>

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}</pre>

<p>CSS 規則に2番目の宣言を追加してからページをリロードすると、作成したグリッドの各セルに項目が1つずつ再配置されていることがわかります。</p>

<div id="Grid_1">
<div class="hidden">
<h6 id="Simple_Grid_Example">Simple Grid Example</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}          </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
 &lt;div&gt;One&lt;/div&gt;
 &lt;div&gt;Two&lt;/div&gt;
 &lt;div&gt;Three&lt;/div&gt;
 &lt;div&gt;Four&lt;/div&gt;
 &lt;div&gt;Five&lt;/div&gt;
 &lt;div&gt;Six&lt;/div&gt;
 &lt;div&gt;Seven&lt;/div&gt;
&lt;/div&gt; </pre>

<pre class="brush: css notranslate">.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
} </pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p>

<h3 id="Flexible_grids_with_the_fr_unit" name="Flexible_grids_with_the_fr_unit">fr 単位での柔軟なグリッド</h3>

<p>長さとパーセントを使用してグリッドを作成するだけでなく、<code>fr</code> 単位を使用して柔軟にグリッドの行と列のサイズを変更できます。 この単位は、グリッドコンテナ内の使用可能スペースの割合を表します。</p>

<p>トラックのリストを次の定義に変更し、<code>1fr</code> のトラックを3つ作成します。</p>

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}</pre>

<p>あなたは今、柔軟なトラックを持っているのを見るべきです。 <code>fr</code> 単位はスペースを比例して配分するので、トラックには異なる正の値を指定できます。 例えば次のように定義を変更したとします。</p>

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}</pre>

<p>最初のトラックの使用可能スペースは <code>2fr</code> になり、他の2つのトラックの使用可能スペースは <code>1fr</code> になり、最初のトラックのサイズが大きくなります。 <code>fr</code> 単位と固定長トラックを混在させることができます — そのような場合、固定長トラックに必要なスペースは、スペースが他のトラックに分配される前に取り除かれます。</p>

<div id="Grid_2">
<div class="hidden">
<h6 id="Simple_Grid_Example_with_fr_units">Simple Grid Example with fr units</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
                </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div&gt;Four&lt;/div&gt;
  &lt;div&gt;Five&lt;/div&gt;
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Seven&lt;/div&gt;
&lt;/div&gt;                        </pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p>

<div class="note">
<p><strong>注</strong>: <code>fr</code> 単位は、<em>すべて</em>のスペースではなく、<em>使用可能</em>なスペースを分配します。 あなたのトラックの1つがその中に大きな何かを持っているならば、共有する空きスペースは少なくなります。</p>
</div>

<h3 id="Gaps_between_tracks" name="Gaps_between_tracks">トラック間のギャップ</h3>

<p>トラック間のギャップを作成するには、列間のギャップには {{cssxref("grid-column-gap")}} プロパティ、行間のギャップには {{cssxref("grid-row-gap")}} プロパティ、両方を同時に設定するには {{cssxref("grid-gap")}} プロパティを使用します。</p>

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}</pre>

<p>これらのギャップは、長さの単位またはパーセントのいずれでもかまいませんが、<code>fr</code> 単位ではありません。</p>

<div id="Grid_3">
<div class="hidden">
<h6 id="Simple_Grid_Example_with_fr_units_2">Simple Grid Example with fr units</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
                </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div&gt;Four&lt;/div&gt;
  &lt;div&gt;Five&lt;/div&gt;
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Seven&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p>

<div class="note">
<p><strong>注</strong>: <code>*gap</code> プロパティは以前は <code>grid-</code> という接頭辞を付けていましたが、これは仕様変更されています。 その意図はそれらを複数のレイアウト方法で使えるようにすることです。 接頭辞の付いたバージョンはエイリアスとして保持されるため、しばらくの間は安全に使用できます。 安全のために、コードをより万全にするために、両方のプロパティを倍増して追加することができます。</p>
</div>

<pre class="brush: css notranslate">.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}</pre>

<h3 id="Repeating_track_listings" name="Repeating_track_listings">トラックリストの繰り返し</h3>

<p>反復記法を使用して、トラックリストの全部または一部を繰り返すことができます。 トラックリストを次のように変更します。</p>

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}</pre>

<p>今までと同じ3つの <code>1fr</code> のトラックが手に入ります。 repeat 関数に渡す最初の値はリストを繰り返す回数で、2番目の値はトラックリストで、1つ以上のトラックを繰り返すことができます。</p>

<h3 id="The_implicit_and_explicit_grid" name="The_implicit_and_explicit_grid">暗黙的グリッドと明示的グリッド</h3>

<p>ここまでは列トラックのみを指定しましたが、コンテンツを保持するために行が作成されています。 これは明示的グリッド対暗黙的グリッドの例です。 明示的グリッドは、<code>grid-template-columns</code> または <code>grid-template-rows</code> を使用して作成したものです。 暗黙的グリッドは、コンテンツがそのグリッドの外側、例えば行に配置されたときに作成されます。 明示的グリッドと暗黙的グリッドは、フレックスボックスの主軸および交差軸と類似しています。</p>

<p>デフォルトでは、暗黙的グリッドに作成されたトラックは <code>auto</code> でサイズ調整されます。 これは一般に、コンテンツに合わせて十分に大きいことを意味します。 暗黙的グリッドのトラックにサイズを指定したい場合は、{{cssxref("grid-auto-rows")}} プロパティと {{cssxref("grid-auto-columns")}} プロパティを使用できます。 CSS に <code>100px</code> の値で <code>grid-auto-rows</code> を追加すると、作成された行の高さは 100 ピクセルになります。</p>

<div id="Grid_4">
<div class="hidden">
<h6 id="Simple_Grid_Example_with_fr_units_3">Simple Grid Example with fr units</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}                  </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div&gt;Four&lt;/div&gt;
  &lt;div&gt;Five&lt;/div&gt;
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Seven&lt;/div&gt;
&lt;/div&gt;
                        </pre>
</div>

<pre class="brush: css notranslate">.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 20px;
}</pre>
</div>

<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p>

<h3 id="The_minmax_function" name="The_minmax()_function">minmax() 関数</h3>

<p>100 ピクセルより高いコンテンツを追加する場合、100 ピクセルの高さのトラックはあまり役に立ちません。 その場合、オーバーフローが発生します。 トラックの高さは<em>最低</em> 100 ピクセルで、さらに多くのコンテンツがトラックに入る場合は拡大できると良いでしょう。 ウェブについてのかなり基本的な事実は、あなたが実際に何かがどれほど高くなるかを本当に知らないということです。 追加のコンテンツや大きなフォントサイズは、あらゆる次元でピクセルパーフェクトになろうとするデザインに問題を引き起こす可能性があります。</p>

<p>{{cssxref("minmax")}} 関数を使用すると、トラックの最小サイズと最大サイズ、例えば <code>minmax(100px, auto)</code> を設定できます。 最小サイズは 100 ピクセルですが、最大サイズは <code>auto</code> で、コンテンツに合わせて拡大されます。 次のように <code>minmax</code> の値を使用するように <code>grid-auto-rows</code> を変更してみてください。</p>

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 20px;
}</pre>

<p>追加のコンテンツを追加すると、それが収まるようにトラックが拡大されます。 拡張は行に沿って行われることに注意してください。</p>

<h3 id="As_many_columns_as_will_fit" name="As_many_columns_as_will_fit">収まる限り多くの列</h3>

<p>トラックリスト、反復記法、{{cssxref("minmax")}} について学んだことのいくつかを組み合わせて、便利なパターンを作成できます。 グリッドに、コンテナに収まるだけの数の列を作成するように依頼できると便利な場合があります。 これを行うには、{{cssxref("repeat")}} 記法を使用して <code>grid-template-columns</code> の値を設定しますが、数値を渡す代わりにキーワード <code>auto-fill</code> を渡します。 関数の2番目のパラメータには、<code>minmax()</code> を使用し、最小値は、必要な最小トラックサイズに等しく、最大値は <code>1fr</code> です。</p>

<p>以下の CSS を使用して、今すぐあなたのファイルで次を試してください。</p>

<div id="Grid_5">
<div class="hidden">
<h6 id="As_many_columns_as_will_fit_2">As many columns as will fit</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
                </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div&gt;Four&lt;/div&gt;
  &lt;div&gt;Five&lt;/div&gt;
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Seven&lt;/div&gt;
&lt;/div&gt;                      </pre>
</div>

<pre class="brush: css notranslate">.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}</pre>
</div>

<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p>

<p>これは、グリッドがコンテナに収まるだけの数の 200 ピクセルの列を作成し、その後すべての列の間で残っているスペースを共有するためです — 最大は <code>1fr</code> で、すでにご存じのとおり、トラック間でスペースを均等に配分するためのものです。</p>

<h2 id="Line-based_placement" name="Line-based_placement">ラインベースの配置</h2>

<p>グリッドの作成から、グリッド上に物を配置することに移ります。 グリッドは常にラインを持っていて、そのラインは 1 から始まり、文書の書字方向モード（Writing Mode）に関連しています。 したがって、英語では、桁の1ライン目がグリッドの左側にあり、行の1ライン目が一番上にあります。 アラビア語では、アラビア語は右から左に書かれているので、桁の1ライン目が右側になります。</p>

<p>開始ラインと終了ラインを指定することで、これらのラインに従って物を配置できます。 次のプロパティを使用してこれを行います。</p>

<ul>
 <li>{{cssxref("grid-column-start")}}</li>
 <li>{{cssxref("grid-column-end")}}</li>
 <li>{{cssxref("grid-row-start")}}</li>
 <li>{{cssxref("grid-row-end")}}</li>
</ul>

<p>これらのプロパティはすべて値としてライン番号を持つことができます。 次の一括指定プロパティを使用することもできます。</p>

<ul>
 <li>{{cssxref("grid-column")}}</li>
 <li>{{cssxref("grid-row")}}</li>
</ul>

<p>これにより、開始ラインと終了ラインを <code>/</code> （スラッシュ文字）で区切って一度に指定できます。</p>

<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">出発点としてこのファイルをダウンロードする</a>か、<a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">ここにあるライブを見てください</a>。 それはすでに定義されたグリッドを持ち、そして簡単な記事が概説されています。 自動配置により、作成したグリッドの各セルに項目を1つずつ配置していることがわかります。</p>

<p>代わりに、グリッドラインを使用して、サイトのすべての要素をグリッドに配置します。 CSS の最後に次の規則を追加してください。</p>

<pre class="brush: css notranslate">header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}</pre>

<div id="Grid_6">
<div class="hidden">
<h6 id="Line-based_placement_2">Line-based placement</h6>

<pre class="brush: css notranslate">                body {
                    width: 90%;
                    max-width: 900px;
                    margin: 2em auto;
                    font: .9em/1.2 Arial, Helvetica, sans-serif;
                }

                .container {
                    display: grid;
                    grid-template-columns: 1fr 3fr;
                    grid-gap: 20px;
                }
header {
    grid-column: 1 / 3;
    grid-row: 1;
}

article {
    grid-column: 2;
    grid-row: 2;
}

aside {
    grid-column: 1;
    grid-row: 2;
}

footer {
    grid-column: 1 / 3;
    grid-row: 3;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}

aside {
  border-right: 1px solid #999;
}
</pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;header&gt;This is my lovely blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;My article&lt;/h1&gt;
    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
  &lt;/article&gt;
  &lt;aside&gt;
    &lt;h2&gt;Other things&lt;/h2&gt;
    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
&lt;/div&gt;               </pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p>

<div class="note">
<p><strong>注</strong>: 終点の列または行のラインをターゲットとして値 <code>-1</code> を使用し、負の値を使用して終点から内側に向かって数えることもできます。 しかしこれは明示的グリッドに対してのみ有効です。 値 <code>-1</code> は、<a href="/ja/docs/Glossary/Grid">暗黙的グリッド</a>の終点のラインをターゲットにしません。</p>
</div>

<h2 id="Positioning_with_grid-template-areas" name="Positioning_with_grid-template-areas">grid-template-areas での配置</h2>

<p>項目をグリッドに配置する別の方法は、{{cssxref("grid-template-areas")}} プロパティを使用して、デザインのさまざまな要素に名前を付けることです。</p>

<p>最後の例からラインベースの配置を削除して（またはファイルを再ダウンロードして新しい出発点にして）、次の CSS を追加します。</p>

<pre class="brush: css notranslate">.container {
  display: grid;
  grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}</pre>

<p>ページをリロードすると、ライン番号を使用しなくても項目が以前と同じように配置されたことがわかります！</p>

<div id="Grid_7">
<div class="hidden">
<h6 id="Line-based_placement_3">Line-based placement</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}

aside {
  border-right: 1px solid #999;
}

.container {
  display: grid;
  grid-template-areas:
  "header header"
  "sidebar content"
  "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}
                </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;header&gt;This is my lovely blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;My article&lt;/h1&gt;
    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
  &lt;/article&gt;
  &lt;aside&gt;&lt;h2&gt;Other things&lt;/h2&gt;
    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
&lt;/div&gt;                     </pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p>

<p><code>grid-template-area</code> の規則は次のとおりです。</p>

<ul>
 <li>グリッドのすべてのセルを塗りつぶす必要があります。</li>
 <li>2つのセルにまたがるようにするには、名前を繰り返します。</li>
 <li>セルを空のままにするには、<code>.</code> （ピリオド）を使用します。</li>
 <li>領域は長方形である必要があります。 例えば、L字型の領域を持つことはできません。</li>
 <li>領域は異なる場所で繰り返すことはできません。</li>
</ul>

<p>あなたは私たちのレイアウトで遊ぶことができます。 例えば、フッターをコンテンツの下にだけあるように変更し、サイドバーをずっと下に広げるように変更できます。 これは、何が起こっているのかが CSS から明らかなので、レイアウトを記述するためのとても良い方法です。</p>

<h2 id="A_CSS_Grid_grid_framework" name="A_CSS_Grid_grid_framework">CSS グリッド、グリッドフレームワーク</h2>

<p>グリッドの「フレームワーク」は、12列または16列のグリッドと CSS グリッドを基にし、そのようなフレームワークを提供するためにサードパーティ製ツールを必要としません — すでに仕様にあります。</p>

<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">出発点ファイルをダウンロードしてください</a>。 これには、12列のグリッドが定義されたコンテナと、前の2つの例で使用したのと同じマークアップが含まれています。 ラインベースの配置を使用して、次のようにコンテンツを12列のグリッドに配置できます。</p>

<pre class="brush: css notranslate">header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}</pre>

<div id="Grid_8">
<div class="hidden">
<h6 id="A_CSS_Grid_Grid_System">A CSS Grid Grid System</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-gap: 20px;
}

header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}

aside {
  border-right: 1px solid #999;
}
                </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;header&gt;This is my lovely blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;My article&lt;/h1&gt;
    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
  &lt;/article&gt;
  &lt;aside&gt;&lt;h2&gt;Other things&lt;/h2&gt;
    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
&lt;/div&gt;
                        </pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p>

<p><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox のグリッドインスペクタ</a>を使用してデザイン上のグリッドラインをオーバーレイすると、12列グリッドがどのように機能するかがわかります。</p>

<p><img alt="私たちのデザインの上に重ねられた12列のグリッド。" src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p>

<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>

<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/CSS/CSS_layout/Grid_skills">Test your skills: Grids</a> を見てください。</p>

<h2 id="Summary" name="Summary">まとめ</h2>

<p>この概要では、CSS グリッドレイアウトの主な機能について説明しました。 あなたのデザインでそれを使い始めることができるはずです。 仕様をさらに深く掘り下げるには、以下にあるグリッドレイアウトのガイドを読んでください。</p>

<h2 id="See_Also" name="See_Also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS グリッドのガイド</a></li>
 <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS グリッドインスペクター: グリッドレイアウトを調査する</a></li>
</ul>

<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>

<ul>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
</ul>