5分で完璧に分かる！CSS Gridの基本的な使い方を解説

CSS Gridは、今まで使用してきたレイアウトの実装とは大きく異なります。flexboxはアイテムを一つの軸に沿って並べるので、floatの延長としてあまり難しくはないと思います。しかし、CSS Gridは軸が一つではなく、縦と横の二つの軸でレイアウトします。

CSS Gridの基本的な使い方を分かりやすく解説します。

Learn CSS Grid in 5 Minutes
by Per Harald Borgen

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• CSS Gridを始めよう！
• 最初のグリッドレイアウト
• CSS Gridの列と行
• CSS Gridのアイテムの配置

CSS Gridを始めよう！

グリッドレイアウトはWebサイトの設計において基本であり、CSS Grid モジュールはグリッドを作成するための最も強力で、最も簡単なツールです。私は個人的にはBootstrapよりもずっと優れていると思います（その理由について）。

CSS Grid モジュールは、現在の主要なブラウザ（Safari、Chrome、Firefox、Edge）でネイティブのサポートも受けているため、すべてのフロントエンドのWeb制作者は遠くない将来このテクニックを学ばなければならないと私は信じています。

この記事ではCSS Gridの基本について、できるだけ分かりやすく解説しました。CSS Gridの基本を理解するまでに、あなたが身につけておくべきことをすべて記しておきます。

私はこの12月に、オンラインでCSS Gridを無料で学べるコースを開設します。下記のプレビューをチェックしてみてください。

GSS Grid 101

早期アクセスを希望する場合は、フォームから申込みください。

では、CSS Gridを始めましょう！

最初のグリッドレイアウト

CSS Gridの主要な要素は2つで、ラッパー（親）とアイテム（子）です。ラッパーとはグリッドで、アイテムとはグリッドに収めるコンテンツのことです。

6つのアイテムを含むラッパーのマークアップは下記のようになります。

ラッパーのdiv要素をグリッドにするには、「display: grid;」を指定するだけです。

これで終わりではありません。なぜならグリッドをどのように見せたいかを定義していないからです。このままでは、6つのアイテムを積み重ねただけのレイアウトです。

※アイテムのdiv要素に背景やカラーのスタイルを加えています。

CSS Gridの列と行

レイアウトを二次元にするには、グリッドの列と行を定義する必要があります。ここでは、3つの列と2つの行を作ります。
grid-template-columnsとgrid-template-rowプロパティを使用します。

grid-template-columnsプロパティには3つの値（100px 100px 100px）を指定したので、3つの縦列ができます。grid-template-rowプロパティは2つの値なので、2つの横行ができます。

グリッドのサイズは、縦列が100pxに、横行が50pxになります。

3つの縦列と2つの横行のレイアウト

値によってCSS Gridで作成されたグリッドがどのように見えるかを正しく理解するために、次の例で確認してみてください。

すべての値を少し変更しました。
あなたが想像した通りのレイアウトになっていますか？

3つの縦列と2つの横行のレイアウト

CSS Gridのアイテムの配置

次に、グリッドにアイテムを配置する方法です。これができないと、レイアウトの役に立ちません。

これまでと同じマークアップを使用して、3x3グリッドを作成します。

この指定で、下記のように表示されます。

3x3のレイアウト

注意

見た目は3x2のレイアウトですが、3x3のグリッドを定義しました。なぜこのような見た目になるのかというと、アイテムが6つだからです。もしアイテムが9つであれば、見た目で3x3になります。

アイテムの配置やサイズを変更するには、アイテムにgrid-columnとgrid-rowプロパティを使用します。

上記のスタイルシートは、.item1を最初の縦のグリッドのラインで開始し、4番目の縦のグリッドのラインで終了と指定しました。
簡単に言うと、.item1は横行全体に配置されます。

.item1アイテムの配置を変更

3つの縦列しかないのに、なぜ4番目があるのか、混乱していませんか？
グリッドのラインとは、下記のようになります。

グリッドのライン

.item1を横行全体に配置した際にグリッド内のすべての行を占めていることに注目してください。最初のアイテム.item1が最初の横行全体に配置されたため、残りのアイテムは押し下げられて配置されます。

最後に、上記のコードを簡単に記述する方法を紹介します。

ここで学んだことを正しく理解していることを確認するために、もう少しアイテムを配置してみます。

どのように表示されると思いますか？

.item1は横の1-3番目まで、.item3は縦の2-4番目まで、.itemu4は横の2-4番目に配置され、下記のように表示されます。

アイテムの配置

CSS Gridの基本はこれで学べたと思います。もちろん、CSS Gridはほかにも便利な機能がたくさんあります。もしあなたが望むなら、フォームにメールアドレスを登録してみてください。ScrimbaのCSS Gridの無料のオンラインコースが開始したら、お知らせします。

ご不明な点やご意見がありましたら、@perborgenまでお知らせください。できる限り真摯にお答えします。

また、How to prototype websites quickly with CSS Gridも公開しました。