ウェブサイトの幅全体にグリッド ナビゲーションを拡張する方法

グリッドの構造

占有させたい列。問題を理解するために、使用した構文を分解してみましょう:

<code class="css">grid-column: 1 / 2;</code>

この表記はグリッド列の開始点と終了点を定義し、次のように分解します:

<code class="css">grid-column-start: 1;
grid-column-end: 2;</code>

この場合、ナビゲーション (nav) に、最初のグリッド列行から 2 番目のグリッド列行まで拡張するように指示します。ただし、矛盾があります:

グリッドには実際には 2 列ではなく 3 列の行があります。

グリッド行のカウント: 開始行と終了行

グリッド システムでは、列/行の線数は常に列/行の数に 1 を加えたものと等しくなります。この余分な線は、グリッドの終わりを示します。

グリッド仕様の調整

この問題を解決するには、すべての列にまたがるようにグリッド仕様を調整できます:

オプション 1: 終了列を指定します

<code class="css">grid-column: 1 / 3;</code>

オプション 2: 負の値を使用します

<code class="css">grid-column: 1 / -1;</code>

負の値は末尾から数えますグリッドなので、「-1」は最後の列行を表します。

変更を行う

元のグリッド列ルールを上記のオプションのいずれかに置き換えます:

<code class="css">.mainnav {
  grid-column: 1 / -1;
}</code>

この変更により、ナビゲーション (nav) がウェブサイトの幅全体に広がるようになります。

以上がウェブサイトの幅全体にグリッド ナビゲーションを拡張する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。