web-dev-qa-db-ja.com

複数の要素を重複せずにCSS-Grid-Cellに配置することは可能ですか?

3つの列と1つの行があり、各グリッド要素を3つの結果のセルの1つに配置したいと思います。これは、3つのコンテナ要素を使用して私が望むものです。

main {
  display: grid;
  grid-template-columns: 33% 33% auto;
  grid-gap: 15px;
}

.container {
  background-color: orange;
}

.element {
  transition: height 0.5s;
  margin: 15px;
  height: 100px;
  background-color: grey;
}

.element:hover {
  height: 200px;
}
<main>
  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>

  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>

  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</main>

これは3つのコンテナーを使用して可能になることはわかっていますが、実際には「必要」ではないものは使用しないようにします。

複数の行を使用し、要素を1行から2行または3行に拡張することは、上記の例のように「スムーズ」ではありません。ただし、複数の行を使用して要素のサイズを変更するだけで、行全体のサイズが変更され、次の行の位置に影響します。

解決策は、同じ列の各要素を同じセルに配置することです。そうすれば、最大で1つの行があり、要素のサイズが変更されるたびに、同じ列内の要素の位置にのみ影響します。これはまさに私が望んでいることです。

同じセルに複数の要素を配置する場合の問題は、それらが重なり続けることであり、それらがそれを行うのを止める方法が見つかりませんでした。

では、css-gridレイアウトのみを使用して、重複せずに同じセルに複数の要素を配置する方法はありますか?

9
asdfsolider

グリッドに割り当てられた要素にはフローが適用されないため、回避する方法はありません。それらは、絶対に配置されているかのように、グリッド上で上下に叩かれます。ただし、z-index値に従います。

これは、要素が交差する領域に割り当てられている場合、要素の重なりが許可されるという仕様 明示的に述べられている であるためです。

また、仕様 奨励 グリッドとフレックスボックスを組み合わせて、より複雑なレイアウトを取得します。

10
Palantir