CSSのgrid-template-columnsを使ってレスポンシブに要素を並べる
始めに
レスポンシブに要素を並べたいという要望があって、久しぶりにCSSを使ったのでその備忘録です。 これが適切なやり方かどうはわからないので、変なところがあればアドバイスいただけるとうれしいです。
要件
- 複数の要素を横に並べたい
- 画面サイズが小さくなったら自動で要素をwrap（次の行に移動）してほしい
イメージは次になります。コードはデモです。
やり方
grid-template-columnsとrepeatを使うことで実現できます。
<div class="wrapper">
<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 class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
<div class="item">item10</div>
</div>
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 60px);
grid-gap: 5px;
}
.item {
text-align: center;
background-color: gray;
color: white;
}
</style>
詳細を解説していきます。
前提としてdisplay: gridは必須になります。
grid-template-columns
要素のサイズと要素数を指定できます。
たとえばgrid-template-columns: 100px 100pxなら次の動きになります。
- 1要素のwidthが100px
- 横2つまで表示する
- 2つ以上の場合はwrap
つまり横に個数を増やしたければサイズ指定を増やせば良いだけです。
ただ、これだけだと画面のサイズ内に目いっぱい表示したい場合は困ります。 なぜなら画面のサイズによって表示できる個数が変わるので、それを動的に計算する必要があるからです。
そこで、repeatの出番です。
repeat
要素の繰り返しを定義できる関数です。2つの引数を受け取ることができ、 1つ目： 繰り返す回数 2つ目： 1要素のサイズ になっています。
たとえば繰り返す回数を2、サイズを100pxにする場合は次のように書きます。
grid-template-columns: repeat(2, 100px);
これは次と同じ定義になります。
grid-template-columns: 100px 100px;
ただ、このままだとやはり回数指定になってしまうのでそこでauto-fillです。
auto-fillは親要素のサイズ内で要素を何個配置できるかを計算してくれるので、こちらで個数を指定する必要がなくなります。
auto-fillのほかにauto-fitというのがありますが、違いはこちらの記事のgifを見れば一発でわかります。
grid-gap
要素間の間隔を指定します。たとえば10pxずつ要素を離したいならgrid-gap: 10px;になります。
これに関してはシンプルでわかりやすいですね。
最後に
CSS、奥深すぎてやばいですね。魔界です。 じっくり勉強していきます。