( CSS Gridの使用)

この投稿は当初公表されたsilvestar.codes .
この解決策は私の昨年の記事のフォローアップポストです"Using CSS Grid where appropriate" . 目標は、アイテムの未知数とナビゲーションのためのソリューションを見つけることです.

回収する

CSSグリッドでのナビゲーションの作成は間違いなく最良の解決策です.しかし、CSSグリッドを使いたいなら、2つのオプションが提案されました.

使用grid-auto-flow: row; そして、各項目をグリッドに配置します.

.nav__item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}

行と列の幅を設定するためのキーワードautoを使用した明確なグリッドの定義

.nav {
  display: grid;
  grid-auto-flow: row;
}
@media screen and (min-width: 320px) {
  .nav {
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, auto);
  }
}

両方の例では、厳密なグリッドを定義しています.
https://codepen.io/CiTA/pen/dzogLV

新しい解決策

私は1年以上の間CSSグリッドを使用しています、そして、私は方法に沿って適切にその特徴を使う方法を学びました:

minmax() function ,

auto-fit keyword ,

grid-auto-flow property , and

メディア質問を避ける方法🎊.

暗号

私は以前の解決策をフォークして、上記の機能を更新しました.ここで最終的な解決策です.
https://codepen.io/CiTA/pen/pOgGqv

.nav--grid2 {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(60px, auto));
  justify-content: center;
}

このコードを分解しましょう.

minmax ()

minmax() 関数は、最小値と最大値の範囲としてサイズを定義します.これは、列と行の動的なサイズを定義することができます.
このプロパティを使用してナビゲーション項目の最小および最大幅を定義できます.この例では、以下のminmax定義を使用しています.minmax(60px, auto)私たちは、コラムが少なくとも60 px幅でなければならないと言います、そして、それは最大内容幅と同じくらい広いべきです.参照 auto keyword 詳細は

オートフィット

auto-fit 繰り返し数として使用する必要があります repeat() function . それは、グリッドがアイテムが空であるように、できるだけ多くのアイテムを置くべきであると言います🤔).

グリッドオートフロー

grid-auto-flow アイテムを配置するためのグリッドアルゴリズムがどのように機能するかを制御するプロパティです.この例では、 dense keyword . グリッドは大きなグリッドアイテムが発生したときに残される可能性のある穴を埋めるべきである.

内容を正当化する

justify-content property ボックスの内容を揃える.私たちはjustify-content: center 項目の内容を中央に揃える.

ボーナス：いいえメディア質問

ご覧の通り、メディアクエリを使用していません.メディア・クエリーは役に立ちます、そして、それらなしで、そして、敏感なウェブデザインがありません、しかし、我々が1を使用せずに反応的なふるまいを構築することができるとき、それはとても満足していると感じます.

最後の思考

CSSグリッドは、まだナビゲーション要素に最適なアプローチではないかもしれませんが、動作します.常にあなたの問題を解決した場合でも、必ずCSSグリッドを使用してみてください.あなたが反逆者であるならば、この考えを無視して、それにもかかわらず、あなたのユーザーが幸せである限り、ウェブ解決を構築するとき、規則が全くありません.😎