48

行数がわからない場合、最初の行から最後の行までのグリッド アイテムを作成することはできますか?

ボックスの数が不明な次の html があるとします。

.box最初のグリッド線から最後のグリッド線までの 3 番目のスパンを作成するにはどうすればよいですか?

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

4

4 に答える 4

29

行数がわからない場合、最初の行から最後の行までのグリッド アイテムを作成することはできますか?

この問題に対する自然なグリッド ソリューションは、現在の仕様(レベル 1) にはないようです。したがって、厳密には Grid プロパティの場合、答えは「いいえ」です。

ただし、この回答で指摘されているように、絶対配置で可能な場合があります。

CSS グリッドは、グリッド領域が暗黙的なグリッドのすべての列/行にまたがるようにすることはできませんが、明示的なグリッドではジョブを実行できます。

負の整数を使用してください。

CSS グリッド仕様の 2 つの興味深いセクションを次に示します。

7.1. 明示的なグリッド

grid-placement プロパティの数値インデックスは、明示的なグリッドの端からカウントされます。正のインデックスは開始側から数え、負のインデックスは終了側から数えます。

そしてここ...

8.3. ラインベースの配置: 、grid-row-start、grid-column-start、 grid-row-endおよびgrid-column-endプロパティ

負の整数が指定された場合は、明示的なグリッドの端から開始して、逆にカウントされます。

つまり、次のプロパティを使用して定義するグリッドである明示的なグリッドを処理する場合:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas

...次のルールを設定することで、グリッド領域をすべての列にまたがらせることができます:

grid-column: 3 / -1;

これにより、グリッド領域が 3 番目の列行から最後の列行にまたがるように指示されます。

逆は次のようになります。

grid-column: 1 / -3;

繰り返しますが、この方法は明示的なグリッドでのみ機能します。

于 2017-05-18T16:49:11.040 に答える
23

そのボックスの css にgrid-row-startを追加し、途方もなく大きな数にまたがるように設定できます。

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; 
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
  grid-row-start: span 9000;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

編集 - 免責事項:

これは最適ではない解決策であり、すべてのブラウザーで機能するわけではありません。注意してください! これは一部のブラウザー (Chrome) では機能するように見えるかもしれませんが、他のブラウザー (Firefox) では不当な数の行が作成され、問題が発生します。

于 2017-05-18T15:55:29.893 に答える