2022/1/20 （更新日: 2022/2/12）

【display: gridが最強】gridでカード型レイアウトをコーディング！

CSS

display: gridって便利なの？

そんな疑問にお答えします。

CSS Grid Layout（グリッドレイアウト）は、2次元レイアウトを、HTML/CSS を使って簡単・自由に操作できるCSSの機能です。

display: gridで指定するこの書き方には馴染みのない方も多いのではないでしょうか。

そういう僕も少し前まではほとんど使ったことがありませんでした。

display: flexがあれば十分と思っていたのですが、実際使ってみるとすごく便利だったので今回紹介します。

まだ使ったことのない方はこの便利さにきっと驚くはずです。

1 display: gridの基本
2 IE対応
3 まとめ：display: gridを使ってみよう！

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の書き方

grid-template-columnsプロパティ

grid-template-columnsプロパティで幅を指定することで横並びになります。

例では各300pxの幅で３つ並ぶことになります。

.grid {
  display: grid;
  grid-template-columns: 300px 300px 300px;
}

gridの書き方

gapプロパティ

gapプロパティで余白の指定を行います。

gap: 20px;とあるのは列、行ともに20px空けるという意味です。

gap: 20px 20px;も同じ意味です。

.grid {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  gap: 20px;
}

gridの書き方

単位「fr」

「fr」という見慣れない単位がありますがこれは「fraction（比率）」のことです。

親要素から見た子要素の大きさを数値ではなく割合で指定できます。

pxで指定するとその幅で固定されるため、画面の幅が狭くなるにつれて見切れてしまいます。

「1fr 1fr 1fr」とは指定した要素の幅を「1 : 1 : 1」で等分するということです。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

「fr」を使うと画面の幅に合わせて伸縮します。

grid-template-rowsプロパティ

高さを指定します。

2行とも300pxにするので「300px 300px」と書きます。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  grid-template-rows: 300px 300px;
}

同じ大きさのボックスがタイル状に配置できました。

gridの書き方

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;
}