CSS グリッドレイアウトは、二次元グリッドシステムを CSS にもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェース要素のレイアウトに利用できます。この記事では、CSS グリッドレイアウトと、CSS Grid Layout Level 1 仕様の一部の用語について紹介します。この記事では、その概要を紹介し、この一連のガイドの残りで詳細を説明します。
グリッドとは何か？
グリッドは、水平線と垂直線が交差した集合であり、行と列を表します。要素は、グリッド上の行と列に従って配置することができます。CSS グリッドレイアウトには次の特徴があります:
固定サイズや変動サイズのトラック
例えば、ピクセル単位で固定トラックサイズのグリッドを作成できます。ピクセル数を指定すれば、お望みのサイズに合ったグリッドが設置されます。また、パーセント値や新たに制定された fr 単位を使用して、変動サイズのグリッドを作成することもできます。
アイテムの配置
行の番号や名前を指定するかグリッドの領域を対象にすることにより、グリッド上の正確な位置にアイテムを配置できます。グリッドには、グリッド上の位置指定が明示されていないアイテムの配置を制御するアルゴリズムも含まれています。
コンテンツを保持する追加トラックの作成
グリッドレイアウトで明確なグリッドを定義できますが、仕様では、定義されたグリッドの外側に追加されたコンテンツとの整合性も扱われており、必要に応じて行や列を追加できます。「できるだけ多くの列をコンテナー内にフィットさせる」ような機能も含まれています。
整列の制御
グリッドには、グリッド領域内に配置したアイテムの整列を制御し、グリッド全体をどのように整列するか制御するためのアラインメント機能も含まれています。
オーバーラップコンテンツの制御
グリッドのセル内または他のセルと部分的にオーバーラップした領域には、複数のアイテムを配置できます。このレイヤーは、z-index で制御されます。
グリッドは強力な仕様であり、flexbox など CSS の他の部品と組み合わせると、以前は CSS での構築が不可能であったレイアウトを作成できます。これはすべて、グリッドコンテナー にグリッドを作成することから始まります。
グリッドコンテナー
グリッドコンテナーを作成するには、要素に対して display: grid か display: inline-grid を指定します。グリッドコンテナーを作成すると、すべての直接の子要素がグリッド要素へと変わります。
この例では、wrapper クラスを持つ div を親要素として、その内部には 5 個の子要素が含まれます。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
.wrapper をグリッドコンテナー化します。
.wrapper {
display: grid;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
すべての直接の子要素がグリッド要素になりました。それぞれの要素がグリッド要素になる以前と比べて、ウェブブラウザー上での見た目の変化は無いでしょう。というのは、アイテムに対して 1 列のグリッドが作成されただけだからです。この点については、 Firefox の開発者ツールの一部である Grid Inspector 機能が便利でしょう。上記の例を Firefox で表示してグリッドを調査すると、grid 値の隣に小さなアイコンが表示されているでしょう。これをクリックすると、その要素上のグリッドがブラウザーウィンドウ内にオーバーレイ表示されます。
CSS グリッドレイアウトについて学び、使っていく中で、このツールは、グリッドに何が起こっているかを視覚的に理解する助けになるでしょう。
この例をさらにグリッドらしくしたい場合は、列を追加する必要があります。
グリッドトラック
ここでは、grid-template-columns および grid-template-rows プロパティを使用してグリッド上に行と列を定義します。これらはグリッドトラックを定義します。グリッドトラックは、グリッド上の 2 本の線の間にある空間です。下の画像では、トラックがハイライトされています。これは、グリッド内の最初の行です。
先述の例に対して grid-template-columns プロパティを追加すると、列トラックのサイズが定義できます。
200 ピクセル幅の列トラックを 3 個持つグリッドを作成しましょう。子要素は各グリッドセルに 1 個ずつレイアウトされます。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
fr 単位
トラックは、どの長さの単位でも定義できます。グリッドには、柔軟なグリッドトラックを作成できるようにするため、追加の長さの単位が導入されています。新しい fr 単位は、グリッドコンテナー内の利用可能な空間の分数 (a fraction) を表します。次のグリッド定義は、利用可能なスペースに応じて伸縮する、幅が 3 等分されたトラックを作成します。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
この次の例では、1 つの 2fr トラックと 2 つの 1fr トラックの定義を作成します。利用可能な空間は、4 つに分割されます。そのうち 2 つが最初のトラックに与えられ、残りはそれぞれ次の 2 トラックに与えられます。
.wrapper {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
最後の例では、絶対サイズのトラックを分数単位と混ぜて使用します。最初のトラックは 500px なので、この固定幅は利用可能な空間から除外されます。残りの領域は 3 つに分割され、比率に応じて 2 つの変動幅のトラックに割り当てられます。
.wrapper {
display: grid;
grid-template-columns: 500px 1fr 2fr;
}
repeat() 記法によるトラック列挙
多くのトラックを持つ大きなグリッドは、repeat() 記法を使用して、すべてまたは一部のトラックのセクションを繰り返すことができます。例えば、このグリッド定義は:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
次のように書くこともできます:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
繰り返し記法は、トラックリストの一部にも使えます。この次の例では、はじめに 20px のトラックを持ち、続けて 6 つの 1fr トラックのセクション、最後に 20px のトラックを持つグリッドを作成します。
.wrapper {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
}
繰り返し記法はトラックの並びを受け取るので、トラックの繰り返しパターンの作成に利用できます。この次の例のグリッドは、1fr トラックと 2fr トラックの並びを 5 回繰り返したパターンからなる、10 のトラックで構成されます。
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr 2fr);
}
暗黙的または明示的なグリッド
私たちは、列トラックを grid-template-columns プロパティで定義したグリッド例を作成しましたが、コンテンツの必要に応じてグリッドに行を作成したい場合があります。これらの行は、暗黙的なグリッド内に作成されます。明示的なグリッドは、grid-template-columns および grid-template-rows で定義された行と列から構成されます。
定義されたグリッドの外側に何かを配置したい場合や、コンテンツの量が多いためさらにグリッドトラックが必要な場合は、グリッドが暗黙的なグリッド内に行と列を作成します。これらのトラックは、デフォルトで自動的にサイズ変更されるため、そのサイズはグリッド内部のコンテンツが基準になります。
grid-auto-rows と grid-auto-columns プロパティで、暗黙的なグリッド内に作成されたトラックのセットサイズを定義することもできます。
下の例では、grid-auto-rows を使用して、暗黙的なグリッド内に作成されたトラックが 200px の高さになるようにしています。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
トラックのサイズ指定と minmax()
明示的なグリッドのセットアップ時または自動生成された行や列のサイズを定義する時、最小サイズのトラックを与えておき、追加されたコンテンツに合わせて広げられるようにしたいでしょう。例えば、行を 100 px より小さくしたくないが、コンテンツの高さが 300 px に引き伸ばされた場合は行の高さをそのサイズに引き伸ばしたい場合です。
グリッドでは、それを minmax() 関数で解決できます。この次の例では、grid-auto-rows の値に minmax() を使用しています。自動生成された行の高さの最小値は 100px、最大値は auto になります。値に auto を使うと、この行のセルがコンテンツのサイズに応じて空間が引き伸ばされ、その高さに合わせられます。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
<div class="wrapper">
<div>One</div>
<div>Two
<p>I have some more content in.</p>
<p>This makes me taller than 100 pixels.</p>
</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
グリッド線
私たちがグリッドを定義する時、グリッドトラックを定義するのであり、グリッド線ではないことに注意しなければなりません。グリッドには、アイテムの配置時に使用する番号の付いた線が与えられます。3 列 2 行のグリッドには、4 本の縦線があります。
グリッド線の番号は、ドキュメントの書字方向に従って付けられます。左から右 (left-to-right) に書く言語では、線 1 はグリッドの左手側にあり、右から左 (right-to-left) に書く言語では、グリッドの右手側にあります。グリッド線には名前を付けることもできます。この方法については後のガイドで解説します。
グリッド線に対するアイテムの配置
グリッド線を基にした配置の詳細は、後の記事で解説します。次の例は、その簡単な方法のデモンストレーションです。アイテムの配置する時、私たちはトラックではなくグリッド線を対象にします。
以下の例では、最初の 2 つのアイテムを、grid-column-start, grid-column-end, grid-row-start および grid-row-end の各プロパティを使用して 3 列トラックのグリッド上に配置します。左から右へ向かって、最初のアイテムは列の線 1 から列の線 4 に対して、右端のグリッド線まで配置されます。また、行の線 1 から始まり、行の線 3 で終わる 2 行のトラックに及びます。
2 番目のアイテムは、グリッド列の線 1 から始まり、1 トラックの幅になります。これはデフォルトであるため、終わりの線を指定する必要がありません。また、行の線 3 から 5 まで、2 行トラックに及びます。他のアイテムは、それぞれグリッド上の空スペースに配置されます。
<div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> </div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box2 {
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 5;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
Firefox の開発者ツールで Grid Inspector が使えることを忘れないでください。アイテムがグリッド線に対してどのように配置されるか知ることができます。
グリッドセル
グリッドセル は、グリッド上の最も小さな単位です。コンセプトとしては、表のセルのようなものです。先述の例で、親要素のグリッドが定義されると、子アイテムが定義されたグリッドの各セルにレイアウトされる様を見てきました。下の画像では、グリッドの最初のセルをハイライトしています。
グリッド領域
アイテムは、行と列の複数のセルにまたがって配置でき、グリッド領域 を作ることができます。グリッド領域は四角形でなければなりません。例えば L 字型の領域は作れません。ハイライトされた領域は、2 行と 2 列にまたがるトラックです。
セル間隔
グリッドセル間の 溝 (Gutters) または 小路 (alleys) は、 column-gap および row-gap プロパティを使用するか、短縮プロパティの gap で作成できます。下の例では、列間 10px、行間 1em の溝を作っています。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 1em;
}
メモ: グリッドが最初にブラウザーに実装されたとき、 column-gap, row-gap, gap に grid- の接頭辞がつき、それぞれ grid-column-gap, grid-row-gap, grid-gap のようになっていました。
ブラウザーは接頭辞を外すよう更新されつつありますが、接頭辞付きの版も安全に利用できるよう保守されるでしょう。現時点では、一部のブラウザーが接頭辞なしの版に対応していないため、このガイドのライブ例は grid- の接頭辞付きの版を使用しています。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
* {box-sizing: border-box;}
.wrapper {
grid-column-gap: 10px;
grid-row-gap: 1em;
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
領域の前に占める溝による空間は、柔軟な長さの fr トラックに割り当てられ、通常のグリッドトラックのようにサイズ設定のために用いられます。しかしながら、溝の内側に何かを配置することはできません。グリッド線を基準にした配置では、溝は太線のように扱われます。
入れ子状のグリッド
グリッドアイテムはグリッドコンテナーにもなります。次の例は以前作成したもので、2 個のアイテムが配置指定された 3 列のグリッドです。この例では、最初のアイテムにサブアイテムが含まれています。これらのアイテムはグリッドの直接の子ではないので、グリッドレイアウトに関係しない通常のドキュメントフローで表示されています。
<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>
この box1 に display: grid を設定すると、トラック定義を与えてグリッドにすることができます。これらは新しいグリッド上にレイアウトされます。
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.box1 {
grid-column: 1 / 4;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
この場合の入れ子状のグリッドは、親グリッドと関係しません。例で表示されているように、親グリッドの grid-gap を継承せず、入れ子状のグリッド内の線は親グリッドの線に沿いません。
サブグリッド
Level 2 のグリッド仕様書の草稿では、サブグリッドと呼ばれる機能があり、親グリッドのトラック定義を利用した入れ子状のグリッドを作成できます。
メモ: サブグリッドは、どのブラウザーにもまだ実装されておらず、仕様が変更される可能性があります。
現在の仕様書では、入れ子上のグリッドの例を編集して、 grid-template-columns: repeat(3, 1fr) のトラック定義を grid-template-columns: subgrid へ変更します。入れ子状のグリッドは親グリッドのトラックを利用してアイテムをレイアウトします。
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display: grid;
grid-template-columns: subgrid;
}
z-index による項目のレイヤー化
グリッドアイテムは、同じセルを占有できます。行番号によるアイテム配置の例に戻り、2 個のアイテムがオーバーラップするように変更しましょう。
<div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> <div class="box box4">Four</div> <div class="box box5">Five</div> </div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.box {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
アイテム box2 が box1 にオーバーラップし、ソースコードに書かれた順に、後のものが先のものの上に表示されます。
順序の制御
アイテムを上に積む順序は、配置が指定されたアイテムと同様に、z-index プロパティを使用して制御できます。box2 に box1 より下位の z-index 値を与えると、box1 の奥に表示されるようになります。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
z-index: 2;
}
.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
z-index: 1;
}
<div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> <div class="box box4">Four</div> <div class="box box5">Five</div> </div>
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.box {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
次のステップへ
この記事では、グリッドレイアウト仕様の要点だけを見てきました。コードの例を試してみてから、 CSS グリッドレイアウトの詳細を掘り下げることの本当のスタートである、このガイドの次のステップへ進んでください。