CSS グリッドはグリッド項目を暗黙的なグリッドの最後の行/列まで拡張できますか?

暗黙的グリッドの最後の行/列にまたがるグリッド項目を作成する

概要

暗黙的グリッドでは、行数と列は明示的に定義されていないため、正確な数を知らずにグリッド項目を最後の行または列まで拡張するのは困難な場合があります。この質問は、CSS グリッドを使用してこれを実現する可能性を検討します。

可能ですか?

現在のバージョンでは、CSS グリッドは最初からグリッド項目を直接拡張できません。暗黙的なグリッドの最後の行/列に移動します。負の整数を使用して明示的なグリッドの終了エッジからカウントすることはできますが、このアプローチはこのシナリオには適用できません。

絶対位置決めを使用した代替ソリューション

グリッドの制限により最後まで拡張することができません。行/列、絶対位置 は潜在的な回避策を提供します。アイテムをコンテナ内に絶対的に配置することで、暗黙的なグリッドの端までスペースを満たすようにアイテムを配置し、引き伸ばすことができます。

絶対配置を使用した例

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  height: 200px;
}

.item {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: yellow;
}

<div class="container">
  <div class="item">Item</div>
  ... other grid items
</div>

この例では、.item が絶対的に配置され、コンテナの高さ全体を満たすように引き伸ばされ、最後まで広がっているような錯覚を生み出します。 row.

結論

CSS グリッドの制限により、暗黙的なグリッドの最後の行/列に直接スパンすることはできませんが、絶対配置などの代替手法を使用して同様の効果を達成できます。

以上がCSS グリッドはグリッド項目を暗黙的なグリッドの最後の行/列まで拡張できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。