このデザインをどう組むか
- 2カラム
- 片側は横幅いっぱいまで伸びる
- 片側は全体のコンテンツ幅のグリッドに沿った位置までしか伸びない
- レスポンシブ対応
以前までどうしていたか
- メディアクエリーと
calcでこねくりまわしていた - 増えるメディアクエリーと
calcの計算で頭が痛い😭
CSS Gridで挑戦
2020年になり、初めてこのタイプのデザインに遭遇したCSS Gridで作れるのでは？と感じたので作ってみた
See the Pen CSS Grid aside image by right714 (@right714) on CodePen.
※水色の棒はコンテンツサイズの目安（1000px）
.grid{display:grid;grid-template:auto/1fr15pxminmax(0,700px)minmax(0,30px)minmax(0,270px)15px1fr;}column指定の各値は、
1fr... レスポンシブ時の左右余白（画面を広げた時）15px... レスポンシブの左右余白（画面を縮めた時）minmax(0,270px)... テキストが入る部分のサイズminmax(0,30px)... テキスト部分と画像部分の余白minmax(0,700px)... テキストとその余白のコンテンツ部分の余ったサイズ（1000-270-30）
minmaxでの指定をする事で、画面が広がった時にコンテンツサイズと等しい大きさを保つようになっている
逆に画面を縮めた時はmin 0のため、リキッドに動く
.grid-image{grid-row:1/1;grid-column:1/4;}.grid-text-box{grid-row:1/1;grid-column:5/6;}画像の部分は、1fr・15px・minmax(0,700px)の範囲にする事で、片側画面いっぱいを実装
テキストの部分は、minmax(0,270px)の範囲にする事で、コンテンツサイズ（1000px）までしか伸びない
IE11で動くのかはわからない😅Autoprefixerがminmaxをどうしてくれるかはいまいち知らないので、それ次第