【初心者さん必見！】CSS:gridの使い方をわかりやすく解説！

みなさんこんにちは。

最近、blenderに挑戦したけどすでに挫折気味のコーギーです。

今回は、レイアウトを作っていく上でかかせないgridについて記事を書こうと思います。

わたし自身、よくflexを使用していたのですが、gridの汎用性の高さに気付き最近はgridもよく使用しています。

しかし、flexと異なり、gridは設定する項目が多かったりととっつきにくいイメージがあるかと思います。

この記事で、gridの使い方をマスターしていただけたらと思います！

gridでできること

まずは、gridには2種類の設定方法があります。

行数や列数を明記するパターンと、エリアを指定して設定するパターンです。

まず初めに、行数や列数を明記するパターンを見ていきましょう！

grid-templateを使う

grid-template-columnと、grid-template-rowを使って、自分で何行必要か・何列必要かを指定します。

上記の例最初の設定では、3列×要素に応じた自動の行にしてね。という記述になります。

gapはflexと同様に機能し、行と行の間に24px開ける・列と列の間を16px開けるという指定をしています。

gridで使用できる単位は下記になります。

• px
• rem, em
• %
• vw, vh
• fr

ここで、「fr」という単位が出てきました。

これは、とれるだけの幅を確保して！という設定になります。

今回の例で言うと、50pxと.gridの10%の幅を引いた残りの幅が1frによって確保されます。

続いて、.grid02を見てみましょう。

こちらはgtid-template-gridにrepeatを使用しています。

repeatはそのままの意味で、第一引数の回数だけ第二引数を繰り返すことになります。

均等配置にしたい場合は、

grid-template-column: repeat(3, 1fr)

とすると、均等に3分割してくれます。

また、第一引数にはauto-fitという値も取ることができます。

こちらを指定すれば、子要素の大きさに応じて、自動で何列で表示するかを決めてくれます。

動作としては、flex-wrap: wrapと近い動きをイメージしていただければ良いと思います。

grid-ariaを使う

基本的には上記の設定を使うのですが、配置が複雑になる場合には、grid-template-ariaを使うのが良いでしょう。

まずは実際の使用方法をご確認ください。

上記の例を見ていいただければわかるように、まず、親にgrid-template-ariaを使ってレイアウト情報を渡します。

.grid{
    display: grid;
    grid-template-areas:
        "header header"
        "main aside"
        "footer .";
    grid-template-columns: 2fr 1fr;
}

次に、各子要素にどこの場所に配置するかの位置情報を設定します。

例えば、headerは最上部の2つ分の幅で配置されます。

.header {
    grid-area: header;
    background-color: red;
}

このように、より直感的に要素を配置することができます。

また、grid-template-columnやgrid-template-rowを使用して、行・列の細かな設定もできるので、複雑なレイアウトを実装する際に便利です。

まとめ

flexとgridを使いこなすことができれば、ほとんどのレイアウト構造を再現することができるだけでなく、メディアクエリの記述を減らすことができます。

慣れが必要ですが、ぜひ積極的に使用して自由自在なレイアウト表現をしてみてはいかがでしょうか！