こんにちは、さち です。
先日、CSS の display: grid; を使って「グリッド」レイアウトを作っていました。
構造としては、grid-template-columns: repeat(auto-fill, ～); を使って、ウィンドウの幅を広げると列の数が増えるようになっています。
しかし、この構造でひとつ困ったことが……。
一番上の「行」を常に左右いっぱいに広げたいのに、上手くいきません。
30分くらい試行錯誤して解決できたので、備忘録として記事にまとめておきます。（気づけば意外と簡単な方法なんですけどね）
やりたいこと
display: grid;でレイアウトしたページです。一番上にある「蓮ノ空女学院」の部分は「行」の左右いっぱいに広がっています。
- ウィンドウの幅を広げて列数が増えても、「蓮ノ空女学院」の部分が常に左右いっぱいに広がっている状態にします。
失敗した方法
グリッドレイアウトで「行」方向の結合をする一番メジャーな方法は、列を区切る線に左から順に割り振られている番号（以下：列番号）を使う方法です。
ソースコード
見やすいように、グリッドと関係ないソースコードの記述は省略しています。
<div id="grid"> <h1>蓮ノ空女学院</h1> <img src="kaho.jpg"> <img src="sayaka.jpg"> <img src="kozue.jpg"> <img src="tsuzuri.jpg"> <img src="rurino.jpg"> <img src="megumi.jpg"> </div>
#grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 10px;
}
h1 {
grid-column: 1 / 4;
}
<h1> に grid-column: 1 / 4; を適用して、「蓮ノ空女学院」の部分を「行」の左右いっぱい広がるようにしました。
結果
<h1>にgrid-column: 1 / 4;を適用しているので、「蓮ノ空女学院」の部分は列番号「1」から「4」まで広がっています。
- しかし、ウィンドウの幅を広げると、「蓮ノ空女学院」の右側に「画像（日野下花帆ちゃん）」が回り込みました。原因は、列数が増えて列番号「5」ができたからです。
列数が固定のグリッドレイアウトなら、この方法でも問題ないんですけどね……。
成功した方法
実は列番号には、左から数える「1」「2」「3」……以外に、右から数える「-1」「-2」「-3」……もあるんです。
知らなかった……。この情報、グリッドレイアウトについてまとめているサイトでも、あまり書いてないんですよね。
これを使えば上手くいきそうです！
ソースコード
見やすいように、グリッドと関係ないソースコードの記述は省略しています。
<div id="grid"> <h1>蓮ノ空女学院</h1> <img src="kaho.jpg"> <img src="sayaka.jpg"> <img src="kozue.jpg"> <img src="tsuzuri.jpg"> <img src="rurino.jpg"> <img src="megumi.jpg"> </div>
#grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
h1 {
grid-column: 1 / -1;
}
<h1> の grid-column の値を 1 / 4 から 1 / -1 に変更しました。
結果
<h1>にgrid-column: 1 / -1;を適用しているので、「蓮ノ空女学院」の部分は列番号「1」から「-1」まで広がっています。
- これなら、ウィンドウの幅を広げて列数が増えても、「蓮ノ空女学院」の部分は、常に「行」の左右いっぱいに広がってくれます。
まとめ
区切り線を反対側（右）から数える方法を知れたのは、とても良い勉強になりました。
これまで列数固定のグリッドレイアウトしか使っていなかったので、このような機会がないと一生知らないままだったかもしれません。
今回は、区切り線の指定に「列番号」を使いましたが、区切り線に任意の「名前」を付けて指定することも可能です。名前の指定は CSS のプロパティ grid-template-columns でできます。詳しくは検索してみて下さい。
また、「行」方向の結合をしましたが、「列」方向でも同じことができます。めちゃくちゃ簡単に言うと、CSS の column のところを row にすればOKです。こちらも詳しくは検索してみて下さい。
コメント