「CSSグリッド」とは？基礎と使い方を解説

CSSグリッドの基本的な使い方

CSSグリッドは使い込むと非常に奥深く、複雑なレイアウトも簡単に作れてしまいます。ここでは、CSSグリッドを使うための基本的な手順を2ステップに分けて紹介していきます。

筆者作成

上の5つのエリアを、CSSグリッドを使って指定していきましょう。

ステップ1：グリッドを定義しよう

CSSグリッドの使い方は、以下の通りです。

まずは、親要素であるグリッドコンテナーを配置して、縦横に線を分割してみましょう。

はじめに、display: gridを指定することで親要素をグリッドコンテナー化します。

次に、grid-template-columnsプロパティを指定して縦の線を引っ張ります。均等に分割するために、*「fr」(fractions)*という単位を利用できます。

grid-template-columns: 2fr 1fr 1fr;

筆者作成

縦と同様に、横の線をgrid-template-rowsプロパティで指定していきます。

grid-template-rows: auto 1fr 3fr;

筆者作成

すると、9つのエリアに分割されました。

筆者作成

以上の図では、左上から順に5つエリアが並ぶことになります。

ステップ2：グリッドにアイテムを配置しよう

それでは、この9つのグリッドエリアに自由自在に要素を配置していきましょう。方法は簡単で、grid-columnを指定するだけです。

筆者作成

例えば上記のように指定する場合には、

grid-column: 2/4;

をCSSに指定するだけで、簡単に意図した位置に要素を配置することができます。

筆者作成

同様に、

grid-row: 2/3;

を指定すれば、一段ずれる形になります。

.masthead{
　　grid-column: 2/4;
　　grid-row: 2/3;
}

.page-title{
　　grid-column: 1/4;
　　grid-row: 1/2;
}

.main-content{
　　grid-column: 1/2;
　　grid-row: 2/4;
}

// 以下同様

最終的には、5つの要素をこのように配置することができました。