CSS グリッドの最後の行を行全体に広げるにはどうすればよいですか?

CSS グリッドの最後の行を埋める

CSS グリッドでの共通の課題は、最後の行の項目が全体を確実に占めるようにすることです。行。正確な項目数がわからないと、解決策がわかりにくいように思えるかもしれません。

nth-child と nth-last-of-type を使用する

これは、組み合わせを使用して達成できます。 CSS ルールの: nth-child および nth-last-of-type。これらのルールは、特定の親要素内の位置に基づいて要素をターゲットにします。これらのルールを使用すると、最後の行の項目の配置とサイズを調整できます。

サンプル コード:

次の CSS を検討してください。コード:

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-items: start;
  grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

説明:

• nth-child(3n-1) および nth-child(3n) は、要素内の位置に基づいて要素をターゲットにします。グリッドコンテナ。これらのルールは、中央と右側の列の項目のスタイルを設定するために使用されます。
• nth-child(3n-1):nth-last-of-type(1) および nth-child(3n-2):nth -last-of-type(1) は、特に最後の行の最後の項目をターゲットにし、その配置と範囲を調整します。
• これらの最後の項目の列範囲を制御するために、grid-column プロパティが使用されます。項目が行全体を埋めるようにします。

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