グリッドレイアウト

グリッドレイアウトを極める 8

2021年12月13日

display: grid; を指定した親要素にコンテナのグリッドレイアウト情報を定義し、子要素では、そのグリッドにアイテムを配置する詳細を定義する

グリッドコンテナに関連するプロパティ

グリッドアイテムに関連するプロパティ

align-self の auto / flex-start / flex-end / center / stretch / についてレイアウトを実践して表示してみた

このぐらいの段階でグリッドコンテナとアイテムに関連したプロパティを上記の通り総ざらいで纏めた。眺めているだけでは、こういうプロパティの使いどころがさっぱり見えてこない。グリッドレイアウトは手段を講じるに際して、様々なアプローチが考えられ、上記のようなプロパティを省略したとしても全体的にバランスを欠くことはあっても著しい支障をきたすことがないが、細かなレイアウト調整が行き詰まったらここを見直すことだ。

グリッドレイアウトに入れた文字の位置を微調整したり、設定したサイズを再考する実践編

では、グリッドレイアウトに文字を入れる場面において、シンプルに上のプロパティ検証する。

(1).コンテナに右寄せのプロパティ(justify-content: right;)を使用してテキストグループを右端へ移動させた。

(2).タイトルが指定されたアイテムは縦方向の中央寄せ(align-self:center;)を使った。

(3).バランスを調節するためにこのアイテムに position: absolute; を使って本文より少し下げた位置まで移動させた。

(4).作者名を指定されたアイテムは縦方向の下寄せ(align-self:flex-end;)を使った。

さて、ちょっと前に「グリッドレイアウトを極める 5」で「CSSで要素やレイアウトのサイズを指定する方法には、コンテンツに依存してサイズを決める方法もある」というページをやった。

(5).この中の max-content をここで使う。コンテナが指定するgrid-template-columns:にて本文の幅に使えれば幸運なのだが。仮に max-content を使わない場合、アイテム毎に幅を設定しなければならないが、レスポンシブの対応の作業が困難になる。

実機で確認したところモバイルのレイアウトが思惑と違う。「縦書き」が疑わしいので、グリッドレイアウトを極める 10「縦書きで右寄せ」を観点として検証した結果、方法論を変更して上手くいった。

この方法論では上手くいかない