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）さらにエンドポイントを１つ前（grid-column-end: -1）に設定することで見出し部分だけ横幅いっぱいにする事ができレスポンシブでもタイルを維持する事ができます。

見出し１

One
Two
Three
Four
Five

見出し2

Seven
Eight

見出し3

Nine

HTMLやCSSは、以下のcodepenにて公開しております。

See the Pen css gridで途中でタイトルや区切りを入れたい。レスポンシブ対応 by yoshiaki nakao (@woopeer) on CodePen.

コメント

コメントを投稿

このブログの人気の投稿

パタパタ時計flip clockを作ってみた

-
イメージ
パタパタ時計をページ内に表示したくて作ってみました。  CSS等で３D表現しようとしたのですが、環境によって表示が重くなる場合があり、思ったよりカクカクした表示になってしまう場合がございました。またプラスチックのざらっとしたテクスチャも入れてみたかったので思い切って画像で対応することにしました。 そこで、下記の様な画像を制作いたしました。  ０から９までの数字毎に縦10列の構成になっていて、４コマで動く様に動かして行きます。 列の上から下に１列目が１コマ目、２列目が２コマ目、３列目が３コマ目、４列目が最終的に表示させたい数字になります。150ミリ秒ごとに列を動かして動いている様に見せています。 See the Pen flip clock by yoshiaki nakao ( @woopeer ) on CodePen . html、css、javascriptをうまく連携させて行います。 今回動かしたいパーツは、「時（十の位）」「時（一の位）」「分（十の位）」「分（一の位）」「秒（十の位）」「秒（一の位）」の６パーツになります。それぞれ <div id="hour10"></div><div id="hour1"></div><div id="min10"></div><div id="min1"></div><div id="sec10"></div><div id="sec1"></div>というブロックで構成いたしました。 先ずは、css。予め各パーツの背景に画像を貼り付けておきます（background-image）。 位置（background-position）はJSで設定するので設定を省きます。画像を１コマサイズ　横60px　縦100pxで制作してますが余白が下2px横4pxですのでそれぞれのパーツを　横56px　縦98px　で固定しました。秒に関しては時分より少し小さく表示させたかったので、cssで縮小（transform: scale3d）させています。 実際
続きを読む

「…続きを読む」リンク

-
 よくある依頼で長い文章の際に冒頭だけ表示したい。つまり、n行以上の場合に折りたたんで「…続きを読む」リンクを付けたいということがあります。その場合、たいていJavascriptの制御で実現させるというのが定石となります。ただ、よくあるということもあり汎用的に使えるJavascriptを作ってみましたのでご紹介いたします。 See the Pen 「…続きを読む」リンク by yoshiaki nakao ( @woopeer ) on CodePen . 設置準備 今回はjQueryを使わせていただきましたので、GoogleのCDNライブラリを読み込んでおきます。※ヘッダー等ですでに読み込み済みの場合は不要です。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 今回作成したJavascriptは以下になりまして、body内に記述する場合は、本文の邪魔にならないようbody内のできるだけ下部に設置すると（SEO的に）よいかもしれません。また、外部に設置したり、設置済みのものに追加する場合は、jQueryの後に読み込ませてください。 <script> $(function(){ $(function () { $(".more-link").each(function (v_n) { $(this).after('<div class="more-link-after"></div>'); f_lessText(v_n); }); }); function f_moreText(v_n) { var e_text = $(".more-link").eq(v_n); var v_closeHeight = e_text.height(); var v_poenHeight = e_text.css("height", "aut
続きを読む

100マス計算をwebで作ってみた

-
イメージ
小学生の算数の基礎学力向上のため、100マス計算を手軽にどこでもできる様にと、webアプリを作ってみました。 https://woopeer.com/100cells_calculation/ 小学生の算数は結局のところ四則計算（＋ー×÷）ができなくては話になりません。また、高学年になればなるほど 計算のスピード も重要な要素になってきます。 特に中学受験をお考えの方は、２桁の掛け算の暗算が必須と言われております。２桁の掛け算が暗算で、できるできないで問題を解くスピードが大きく変わってきます。受験時の算数に関してですが、普通にやっていては試験時間内に最後まで問題を解くことはできません。特に冒頭に出てくる計算問題がポイントで、正確に素早く解くことが求められます。 ここができるかが合否の分かれ目だといっても過言ではないでしょう。 ２桁の計算スピードのアドバンテージは必ず受験に役立つ物であるとお約束いたします。また受験でなくても１桁等の計算はもとより２桁の四則計算が暗算でできる様になれば一生の宝となり得ます。 操作方法 操作方法はとても簡単です。直感的な操作ができるようになっておりまして「＋」「ー」「X」のボタンのどれかを押せばスタートするようになっております。 全問回答した後、間違っている箇所は赤くエラー表示されますので間違ったところをすぐ訂正できます。 また、それぞれレベル設定ができるようになっております。レベルを上げていくと1～１０以上の数字となりまして例えばレベル10の足し算ですと横の列が20～29となり小学校低学年のお子様にちょうどよいかと思います。 おすすめはレベル10からの掛け算で横の列が10～19の掛け算です。この計算がすらすらとできるようになると小学生での算数はマスターしたも同然です。 ゲーム要素も多少取り入れておりまして、解いた時間によって🌻マークを表示させるようになっております。時間内に解いて🌻🌻🌻を目指してみては？。
続きを読む