CSS Grid Layoutでwidthを指定してもはみ出て困った

DMM.com Advent Calendar 2018 14日目の記事です。

オンラインサロン専用SNSの開発・運用している@Hiro2525です。

最近前述したwebアプリでCSS Grid Layoutを導入してたため、Grid Layoutの紹介を兼ねて書こうと思います。

CSS Grid Layoutとは

コンテナと呼ばれる親要素内に、アイテムと呼ばれる子要素を自由に配置ができる機能です。
以下のようなレイアウトもできたりします。（こんなレイアウトする人いないと思いますが...）

See the Pen grid by hiro (@h1r0-2525) on CodePen.

詳細は下記のリンクをご覧ください
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout
CSS Grid Layout を極める！（基礎編）

なぜ導入したのか

開発しているwebアプリはPC、スマートフォンのソースを分けていません。レスポンシブです。
このレスポンシブの対応を容易にするために導入した次第です。

例えば、画面の幅に合わせて自動的にカラム数を増減させたい場合は親要素に
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
と指定すると、全ての子要素が180pxより広くなることができなくなった時点でカラムが減少します。

See the Pen grid auto column by hiro (@h1r0-2525) on CodePen.

widthが効いてない

ここから今回の本題です。

現象

実際に作ったものを見ていたとき、子要素のテキストがはみ出ていることが発覚
親要素にwidth: 200px;を指定、子要素にはwidth: 100%;　overflow: hidden;を指定しているのに。。。

See the Pen KKwMrOe by hiro (@h1r0-2525) on CodePen.

原因

単純なことでgrid-template-columnsを指定していなかったこと(正確には少し違います)でした。
今までFlexbox使っていたため子要素をwidth: 100%;指定すればいいという考えになっていました。。。

widthだけでは効かない理由は
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
を読んでいてわかりました

暗黙的または明示的なグリッド
私たちは、列トラックを grid-template-columns プロパティで定義したグリッド例を作成しましたが、コンテンツの必要に応じてグリッドに行を作成したい場合があります。これらの行は、暗黙的なグリッド内に作成されます。明示的なグリッドは、grid-template-columns および grid-template-rows で定義された行と列から構成されます。

定義されたグリッドの外側に何かを配置したい場合や、コンテンツの量が多いためさらにグリッドトラックが必要な場合は、グリッドが暗黙的なグリッド内に行と列を作成します。これらのトラックは、デフォルトで自動的にサイズ変更されるため、そのサイズはグリッド内部のコンテンツが基準になります。

つまり「定義されていないトラックとして作成されたため、グリッド内部のコンテンツに合わせてサイズが自動的に変更されていた」というのが正しい原因になります。

grid-auto-columns、grid-auto-rowsを使用する

前述した通りgrid-template-columns、grid-template-rowsを指定して、トラックを定義することも可能ですが、grid-auto-columns、grid-auto-rowsという定義されていないトラックのサイズを指定できるプロパティもあります。

個人的にはgrid-auto-flowを使用して1行もしくは１列のコンポーネントを作成して、サイズを指定したい場合はこちらを使用する方がいいかなと思います。

grid-auto-columnsを適用した結果

See the Pen qBENLbd by hiro (@h1r0-2525) on CodePen.

追記 at 2019/12/13

ちなみにdisplay: grid;を指定した直下の要素にoverflow: hidden;を指定するだけでテキストがはみ出なくなってました。
でも、お作法的にはトラックのサイズを指定してあげる方がいいのかなと思います。

See the Pen NWPrexY by hiro (@h1r0-2525) on CodePen.

----追記ここまで----

ちょっと困ったこと（2023/09/05追記あり）

Gridを使用してどうしてもできなかったことが一つだけありました。
トラックの幅が全て違うかつ可変個数のコンテンツを横一列に並べ、画面端まで来たら自動的に改行するというものです。
Flexboxではflex-wrapを使用すればできましたが、Gridだとどうやるのだろうか分からずじまいです。
ご存知の方がいたら教えてください

追記 at 2023/09/05

色々考えたのですが、上記のように可変長の要素を描画したいといった場合はFlexboxで対応するのが正しいかと思いました。
GridはFlexboxの代わりとして使うのではなく、両者を上手く使い分けることが必要そうです。

まとめ

今回はFlexboxからGridに変更したことで新しいトラックという概念にハマってしまいました。
まだまだ使い始めたばかりで分からないことも多いですが、それでもレスポンシブ対応がしやすくなり感動しました。

もう少し使用して知見を得ていこうと思います