

そんな疑問にお答えします。
CSS Grid Layout(グリッドレイアウト)は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できるCSSの機能です。
display: gridで指定するこの書き方には馴染みのない方も多いのではないでしょうか。
そういう僕も少し前まではほとんど使ったことがありませんでした。
display: flexがあれば十分と思っていたのですが、実際使ってみるとすごく便利だったので今回紹介します。
まだ使ったことのない方はこの便利さにきっと驚くはずです。
目次
display: gridの基本
display: gridの書き方
基本的な書き方として必ず必要なのは親要素と子要素です。
今回親要素を「grid」、子要素を「item」としました。
<div class="grid">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
</div>
次に「grid」に「display: grid」を追加します。
.grid {
display: grid;
}
.item {
background: #DDDDDD;
padding: 10px;
}
この時点では「item」はまだ縦に並んでいるだけです。
grid-template-columnsプロパティ
grid-template-columnsプロパティで幅を指定することで横並びになります。
例では各300pxの幅で3つ並ぶことになります。
.grid {
display: grid;
grid-template-columns: 300px 300px 300px;
}
gapプロパティ
gapプロパティで余白の指定を行います。
gap: 20px;とあるのは列、行ともに20px空けるという意味です。
gap: 20px 20px;も同じ意味です。
.grid {
display: grid;
grid-template-columns: 300px 300px 300px;
gap: 20px;
}
単位「fr」
「fr」という見慣れない単位がありますがこれは「fraction(比率)」のことです。
親要素から見た子要素の大きさを数値ではなく割合で指定できます。
pxで指定するとその幅で固定されるため、画面の幅が狭くなるにつれて見切れてしまいます。
「1fr 1fr 1fr」とは指定した要素の幅を「1 : 1 : 1」で等分するということです。
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
grid-template-rowsプロパティ
高さを指定します。
2行とも300pxにするので「300px 300px」と書きます。
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
grid-template-rows: 300px 300px;
}
同じ大きさのボックスがタイル状に配置できました。
repeat
repeat()は繰り返しの指定です。
繰り返す回数を左側に、繰り返す値を右側に書きます。
つまりgrid-template-columns: 1fr 1fr 1fr; と grid-template-columns: repeat(3, 1fr); は同じことです。
このように効率的に記述することができます。
grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
grid-template-rows: 300px 300px;
}
auto-fitとminmax
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); と書くことで、親要素の幅に入る分だけのカードが入り、余った分は均等に300pxに足されます。
つまり幅に応じて自動でカード枚数が増減されます。
たった3行書くだけでレスポンシブまで完了します。
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.item {
background: #DDDDDD;
width: 100%;
height: 300px;
padding: 10px;
}
IE対応
このようにgridは非常に便利なのですが一点注意しなければならないことがあります。
それはIE 11対応が必要だということです。
Internet Explorerで使用する場合は独自の記述をする必要があります。
Autoprefixerを通せば対応できそうなのですが、それでもそもそもgap自体には対応していないとか。
そうなれば書き方を変えないといけないですし、いろいろ面倒な点もありそうです。
まとめ:display: gridを使ってみよう!
IE11については2022年6月15日でサポートが終了します。
そうなれば今よりももっと使いやすい状況になります。
横並びのコーディングはdisplay: flexが主流だとは思いますが、今回のカード型レイアウトに関してはdisplay: gridの方が圧倒的に楽です。
コード量が少なくなるし、幅の計算とかマージンとかに余計な頭を使わなくて済みます。
今後はもっとdisplay: gridが活躍する機会は増えてくるんじゃないでしょうか。
まだ使ったことないがない方はぜひ使ってみましょう。
投稿者 トシ
コメントを残す