多くのホームページでは、段組を行うときは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」でも使うことができます。