CSSグリッドのすべての列にまたがる行を作成するにはどうすればよいですか?

CSS グリッドのすべての列にわたって行を拡張する: 範囲を調整する

CSS グリッドのすべての列にわたってナビゲーション行を拡張する場合、必ず適切な列行を指定してください。最初に次のように定義しました。

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

これは、グリッド列 1 行目から 2 行目まで拡張する行を定義し、1 つの列のみをカバーします。

解決策 1: まで拡張します。最後の行

行をすべての列にまたがるには、グリッド列プロパティを調整して最後の行まで拡張できます。

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

これは、行が最初の列行で開始し、3 番目 (最後の) 列行で終了する必要があります。

解決策 2: 負の値を使用する

または、負の値を使用して、グリッドの最後からの参照:

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

ここで、-1 は最後の列行を表し、実質的に行がすべての列にまたがるようになります。

調整されたコード:

<code class="css">body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / -1;    /* Adjusted to span all columns */
  grid-row: 1 / 2;        /* Adjustment for explicit grid */
  background-color: #5eccc0;
}

...</code>

以上がCSSグリッドのすべての列にまたがる行を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。