この記事で伝えたいこと
IE11にグリッドレイアウトを対応させる場合は**grid-template-columnsやgrid-template-rowsの中のminmax関数の最小値にauto**を使うのを止めよう。
なぜ？：
プリフィクス付けても認識されなくてレイアウトがぐちゃぐちゃになるから。
対策：
autoの代わりにmin-contentか数値を使ったら治る！(内容によってmin-contentが効かない時もある、その時は具体的にpxで指定)
作っていたサイトのコンテンツだとmin-contentでバッチリだったんですが、サンプルで作ったミニマルなコンテンツだと効かなくて0を使ったら一応解決したりして…もう原理がよく分からないんですがとにかくよろしくお願いします。(誰か～)
経緯
作っていたサイトの条件が「IE11以降に対応」だったので、ブログ記事ページをgridレイアウトを使って作り、IE11にはオートプリフィクサーを使って対応することにしました。
グリッドで作ったレイアウトはこんな感じ。
画面幅840px以下になると作者紹介とサイドバーの上下を入れ替えた上で、記事リストの下に配置される1カラムレイアウトに変化します。
grid-areaとgrid-template-areasの指定で、その辺の配置換えも脳みそを使わずラクラクでした。
gridの基本的な使い方は丁寧に解説されているサイトが沢山あるので割愛します。（私はCode Grid様の解説記事を参考にしました。※有料記事）
問題のgrid-columnとgrid-rowの指定
.grid-wrap {
display: grid;
/* グリッドの幅の指定 */
grid-template-columns: minmax(0, 1fr) minmax(min-content, 795px) 275px minmax(0, 1fr);
/* グリッドの高さの指定 */
grid-template-rows: auto auto auto;
margin: 3rem auto;
column-gap: 2vw;
row-gap: 2.5rem;
grid-template-areas : ". article1 author ."
". article2 sidebar ."
". article3 sidebar .";
}
縦幅の指定は3つのグリッド幅がそれぞれコンテンツの量だけ伸びるという指定だったので、auto auto autoで大丈夫だったのですが、問題は横幅で、PC画面のサイズに合わせてのレスポンシブも必要なため、サイドのスペースを含めて
minmax(0, 1fr) minmax(auto, 795px) 275px minmax(0, 1fr)
という4つのグリッドコラムを作りました。
文章で書くと、「コンテンツの最大幅より画面が大きければ左右に均等な余白が広がり、コンテンツの最大幅より小さくなったら記事リストの幅が縮んでいく」というグリッド幅の変化が可能になります。
一応一つづつ解説しますと、
- コンテンツ幅より画面が広がった時に左右に出来る余白の左側 ※左右で合計2fr指定しているので、出来た余白は左右均等に増えていく。
- 記事リストのグリッド。最小幅は、他のグリッド幅やマージンを画面幅から引いて残ったサイズ、最大幅は795pxでそれ以上は広がらない。
- サイドバーのグリッド。275pxで固定。
- １と同じ、余白の右側。
↑画面幅がコンテンツ最大幅より狭くなった時の変化。記事リストのグリッドが縮みます。(ただし画面幅が840px以下になると1カラムに変形)
※MS以外が対象ならこれで問題ありません
しかしIE11まで対応するため、
Autoprefixer CSS online
を使って先のCSSにプリフィクサ―を追加しました。
.grid-wrap {
display: -ms-grid;
display: grid;
/* グリッドの幅の指定 */
-ms-grid-columns: minmax(0, 1fr) 2vw minmax(0, 795px) 2vw 275px 2vw minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr) minmax(auto, 795px) 275px minmax(0, 1fr);
/* グリッドの高さの指定 */
-ms-grid-rows: auto 2.5rem auto 2.5rem auto;
grid-template-rows: auto auto auto;
margin: 3rem auto;
-webkit-column-gap: 2vw;
column-gap: 2vw;
row-gap: 2.5rem;
grid-template-areas : ". article1 author ."
". article2 sidebar ."
". article3 sidebar .";
}
しかしこれ↓がEdgeやIE11で見た悲しい状態。固定値で指定したサイドバーの幅と左右の余白は機能していますが、記事リストコンテンツはダメみたいですね。。
gridを勉強したサイトにはminmax関数の初期値は(auto , auto)だと書いてあったのにどうしてなんでしょうか…分かりませんがとにかく色々検索したところ
こちらの記事にIE11でのautoの動きは他と異なる(つまり使えない)という記述を発見。記事の勧めに従ってmin-contentを指定したら希望通りの動きになりました！
やった解決！記事に書こう！と喜んでサンプルを作ったんですが、、このサンプルのコンテンツ内容だとmin-contentもうまく機能しないんですよね。本当に何故
ですが、素直に最小値に0を指定したら希望通りに動きました。結局最大値より小さい場合は0と最大値の間の幅(＝画面幅から他のグリッドを引いた残りの幅＝auto)になるのでauto指定したのと同じということですかね…
ただこの方法は、最小値0の要素が無限に小さくなってしまうので、一定以上の画面幅を下回ると1カラムに変形するメディアクエリがあるから成り立つ感じはあります。
じゃあ最小の大きさが欲しかったらそれもやっぱり固定値で指定しとけば良いじゃんってなるし、これで結構解決なのかな。うーんやっぱり完全理解には程遠いgridですが、基本めちゃ便利なので今後も勉強して積極的に使っていきたいですね。