cssグリッドを使ってタイル状に並べる際に、タイトルを入れて区切りを入れる最適解
レスポンシブ対応のページでcssグリッドを使ってコンテンツをタイル状に並べるといった場面はよく出てくると思います。 通常ですとコンテンツをラッピングしている要素に「display: grid」を指定してやるだけでコンテンツがタイル状に並んでくれます。 横３つで並べる場合 「grid-template-columns: repeat(3, 1fr)」としてやれば横3つでタイル状に並んでくれます。 One Two Three Four Five レスポンシブ対応を考えた場合。PCの場合は幅180px前後で幅ぴったりに複数ならべ、スマホの場合は１つだけ表示させたい。といったような対応が迫られる事があります。 レスポンシブでブラウザの幅で並べる数を変えたい場合 この場合は、「grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))」幅180px指定を設定することで対応可能です。 この場合は、PCが4つ、タブレットが3つ、スマホが1つ、で横幅ぴったりで収まってくれます。 One Two Three Four Five この方法は、レスポンシブを考えた場合とても有効で有用な方法だと思います。しかし、下記のように途中に小見出しを入れたい場合に、コンテンツの数が少ない場合にタイル状に並ばないような状況が出てしまいます。 よくある失敗例 小見出し以降のコンテンツが２個や１個の場合PCではコンテンツが広がってしまいタイル状に並んでくれない。 これは上下のコンテンツが独立したグリッドなのが原因です。 レスポンシブでこれを改善させるためにはメディアクエリを多用したり、空の要素を追加したりして解決するしかございません。 小見出し１ One Two Three Four Five 小見出し2 One Two 小見出し3 One では、どうするか。 以下のような解決策でこれが現状の最適解となります。 成功例 グリッドを上下で分けずに見出しも含めてグリッドに入れてしまい、タイトルのスタート位置を一番目（grid-column-start: 1）さ