お疲れ様です！るーぷのコーダー、三木です。すみませんさっそく本題に入ります！

今回の悩み

今回は上のようなフッターナビゲーションで陥った悩みを解決していきます。

何を悩む必要があるのか、まず説明いたします。

横並びのアイテムの幅を別々に変化させたい。

さて、先ほどのナビゲーションですが、画面幅1600pxの状態がデザインになります。

じゃあ1200pxの時は？800pxの時は？と考えるのがコーダーの役割！
（と、この時は頭が凝り固まっていました…）

画面幅を縮めた際、こういったナビゲーションは文字が折り返すと見映えが悪くなりそうなので、
一番左の要素はできれば縮めたくないなと思いました。

そこで、今回はgridの「minmax関数」を使いました。

「minmax関数」とは

「minmax関数」は、gridアイテムの最小幅と最大幅を指定できる関数です。

解説は、検索すれば非常にわかりやすい記事がいくつかございますので、そちらをご参照いただけると幸いです。

参考記事：しっかり理解しておくと便利なCSSのテクニック、minmax()関数の使い方 | コリス

参考記事：とほほのグリッド入門 – とほほのWWW入門

実際のコード

HTML（念の為）

<nav id=”ft_nav”>
 <ul>
<!– 1つめのli（左から1列目） –>
  <li>
   <p class=”parent_text”>会社情報</p>
   <ul class=”child_nav”>
    <li><a href=””>代表挨拶</a></li>
    <li><a href=””>会社概要・アクセス</a></li>
    <li><a href=””>沿革</a></li>
    <li><a href=””>わたしたちの「500個の強み」</a></li>
   </ul>
  </li>
<!– 2つめのli（左から2列目） –>
  <li>
   <p class=”parent_text”>取扱商品</p>
   <ul class=”child_nav”>
    <li><a href=””>カテゴリ1</a></li>
    <li><a href=””>カテゴリ2</a></li>
    <li><a href=””>カテゴリ3</a></li>
   </ul>
  </li>
<!– 3つめのli（左から3列目 上から1行目） –>
  <li><a href=””>生産事業</a></li>
<!– 4つめのli（左から3列目 上から2行目） –>
  <li><a href=””>輸入販売事業</a></li>
<!– 5つめのli（左から4列目 上から1行目） –>
  <li><a href=””>採用情報</a></li>
<!– 6つめのli（左から4列目 上から2行目） –>
  <li><a href=””>お問い合わせ</a></li>
 </ul>
</nav>

CSS（重要部分は赤色）

#ft_nav > ul{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 16em repeat(3, minmax(min-content, 16em));
  grid-template-columns: 16em repeat(3, minmax(min-content, 16em));
  grid-column-gap: 2%;
  grid-row-gap: 1.75em;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

/* 以下はgridの配置を記述しているだけです。 */
#ft_nav > ul > li{
  -ms-grid-column-span: 1;
}
#ft_nav > ul > li:nth-of-type(1){
  -ms-grid-column: 1;
  grid-column: 1/ 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/ 3;
}
#ft_nav > ul > li:nth-of-type(2){
  -ms-grid-column: 2;
  grid-column: 2/ 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/ 3;
}
#ft_nav > ul > li:nth-of-type(3){
  -ms-grid-column: 3;
  grid-column: 3/ 4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/ 2;
}
#ft_nav > ul > li:nth-of-type(4){
  -ms-grid-column: 3;
  grid-column: 3/ 4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/ 3;
}
#ft_nav > ul > li:nth-of-type(5){
  -ms-grid-column: 4;
  grid-column: 4/ 5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/ 2;
}
#ft_nav > ul > li:nth-of-type(6){
  -ms-grid-column: 4;
  grid-column: 4/ 5;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/ 3;
}

1200pxの時

この時はまだ、全て均等に見えますね。
最大幅が16emで、「justify-content: space-between;」も指定しているので、「grid-column-gap: 2%;」以上に隙間が空いているのもお分かりいただけると思います。

769pxの時（スマホ表示切り替え直前）

ここまで来ると、一番左以外は縮んでいるのがお分かり頂けると思います。

今回は、minmax関数の最小値の方に「min-content」を指定しました。
(「min-content」は、内部のコンテンツの中で最も大きい要素の幅まで小さくなります。テキストの場合は最も長い単語と同じくらい小さくなります。)

例えば「min-content」でなく、calcを使って、一番左以外を均等の大きさにすることも可能です。
今回とほぼ同じ見た目が実現できます。

CSS（変更点は赤色部分です）

#ft_nav > ul{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 16em repeat(3, minmax(calc((100% – (2% * 3) – 16em) / 3), 16em));
  grid-template-columns: 16em repeat(3, minmax(calc((100% – (2% * 3) – 16em) / 3), 16em));
  grid-column-gap: 2%;
  grid-row-gap: 1.75em;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

calcで、「（100% -（gridのgap * 4列なのでgapは3つ）- 一番左の固定幅） / 3」を最小値にしました。

おわりに（ここまでする必要は無かったというお話。）

ドヤ顔で先輩に、「これで文字折り返さないで済みましたよ！」と画面を見ていただいたのですが、

「ここまでギチギチにするなら、1024pxぐらいで4列→2列にすれば良いんじゃ…」とご意見をいただきました！

絶対その方がいいですね…(´・ω・`)

ということで、今回はgrid+minmaxの使い所では無かったのですが…どこかで必ず役にたつ方法だと思ったので、ご紹介いたしました。

デザインの幅以外の調整も、悩んだらデザイナーさんに意見を伺いましょうね…

メルマガ登録