多くのホームページでは、段組を行うときはCSSのフレームワークやFlexboxが使われていました。

2017年4月、macOSとiOSのアップデートによって、ついにCSS Grid Layout Moduleが実装されたSafariにバージョンアップされ、すべてのモダンブラウザで「CSS Grid」が利用可能となりました。

「CSS Grid」の登場により、フレームワークを利用しなくてもCSSの標準規格で柔軟な段組ができるようになりました。

それでは、CSSに搭載された*「CSS Grid」*とは、従来のフレームワークを使った段組とはどんなところが違うのでしょうか。
今回は、CSSの標準的なレイアウトモジュールになるであろう「CSS Grid」の概要をご紹介します。

CSSの新しいレイアウトモジュール「CSS Grid」

wireframe.jpeg

「CSS Grid」を使えば、ある要素を簡単にグリッドレイアウトで表現できるようになります。

使い方は非常に簡単です。
親要素に*「display: grid」もしくは「display: inline-grid」を指定します。
このとき、親要素のことを「グリッドコンテナ」(Grid Container)、グリッドコンテナの中にある子要素のことを「グリッドアイテム」*(Grid Item)と言います(概念としてはFlexboxに非常に似ています)。

グリッドコンテナには、列を指定する*「grid-template-column」と、行を指定する「grid-template-row」*というプロパティを指定することができます。
それぞれに、行や列のグリッドのサイズをその数だけ指定していきます。

.container {
　　grid-template-columns: 20px 40px auto 40px 20px;
　　grid-template-rows: 25% 100px auto;
}

また、ブラケットを使って行や列に名前をつけることもできます。
その場合には、*[name]*のように個別に名前をつけます。

.container {
　　grid-template-columns: [col1] 33% [col2] 34% [col3] 33%;
　　grid-template-rows: [row1] 47% [row2] 53%;
}

さまざまなプロパティ

*「grid-template-column」「grid-template-row」*以外にも、よく使うプロパティをご紹介します。

「grid-column-gap」「grid-row-gap」「grid-gap」

*「grid-column-gap」「grid-row-gap」を使うとそれぞれ、グリッドアイテムの列や行の間の余白を指定することができます。
また、「grid-gap」*は、この2つをショートハンドで記入することができます。

.container {
　　grid-gap: 20px 10px;
}

例えば、上記のような場合には、列に20px、行に10pxの余白を作ります。

「grid-column」「grid-row」

*「grid-column」「grid-row」*では、スラッシュ区切りで列や行のライン番号を指定することができます。

column.png

図のように、列が3、行が2列の場合、列のラインは1〜4、行のラインは1〜3というようになります。
番号は1から始まりますが、ラインは両端にあるので、最大のライン番号は実際の行や列の数に１を足した番号になることに注意をします。

「justify-items」「justify-content」「justify-self」「align-items」「align-content」「align-self」

*「justify-items」「justify-content」「justify-self」「align-items」「align-content」「align-self」*の6つのプロパティは、Flexboxを使うときにも見るので、馴染みのある方も多いのではないでしょうか。
実はこれらはFlexbox特有のものではなく、Box Alignment Moduleという仕様になっているので、「CSS Grid」でも使うことができます。

もっとも標準的なCSS Gridの例

もう少し具体的にCSS Gridについて見ていきましょう。
下記の例では、3つの列と2つの行で構成されているCSS Grid Layoutです。
一番右のセルは2行にまたがっているように見えます。

box.png

これをコードに直してみると、以下のようになるでしょう。

.container {
　　display: grid;
　　grid-template-columns: [col1] 33% [col2] 33% [col3] 33%;
　　grid-gap: 10px;
　　grid-template-rows: [row1] 47% [row2] 47%;
　　text-align: center;
　　color: #fcfcfc;
}

.grid-item-1 {
　　background-color: #0060e6;
　　padding: 25px;
　　border-radius: 6px;
}

.grid-item-2 {
　　background-color: #0060e6;
　　padding: 25px;
　　border-radius: 6px;
}

.grid-item-3 {
　　background-color: #0060e6;
　　padding: 25px;
　　border-radius: 6px;
}

.grid-item-4 {
　　background-color: #0060e6;
　　padding: 25px;
　　border-radius: 6px;
}

.grid-item-5 {
　　background-color: #ff1493;
　　grid-column: 3 ;
　　grid-row: 1 / 3;
　　padding: 25px;
　　border-radius: 6px;
}

HTMLは以下のようになります。

<div class="container">
　　<div class="grid-item-1”>1</div>
　　<div class="grid-item-2”>2</div>
　　<div class="grid-item-3”>3</div>
　　<div class="grid-item-4”>4</div>
　　<div class="grid-item-5”>5</div>
</div>

「.container」内では列の横幅や行の高さを指定します。
また、ブラケットを使うことで名前を指定することもできます。
「.grid-cell-5」については、*「grid-column: 3;」*をつけることで、3番目の列に来るように指定しています。
*「grid-row: 1/3」*は、最初の行から(実際には存在しない)3行目までにラインを伸ばすように指定をしています。

まとめ

デザイナーによっては、従来使っていたCSSフレームワークを使うよりも、かえって「CSS Grid」を使ったほうが分かりやすいと感じたひともいるのではないでしょうか。
実際、外部ファイルを読み込む必要もなく、互換性の面でもこちらのほうが優れていると言えるので、これからますますWeb開発の現場で登場しそうです。

折り返しはするけれど一方的なFlexboxとは違い、「CSS Grid」では縦横自由に配置することが可能です。
導入は非常に簡単なので、ぜひ利用してみてはいかがでしょうか。