web-dev-qa-db-ja.com

グリッドアイテムを最後の行/列にスパンする

行数がわからないときに、グリッドアイテムを最初の行から最後の行までスパンすることは可能ですか？

箱の数が不明な次のhtmlがあるとします。

3番目の.box最初のグリッドラインから最後のグリッドラインまでのスパン？

.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>
htmlcsscss3css-grid
30
jbe

そのボックス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）は問題を引き起こす不条理な行を作成します。

10
Hodrobond

行数がわからないときに、グリッドアイテムを最初の行から最後の行まで広げることは可能ですか？

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

ただし、 この回答 で指摘されているように、絶対位置決めでは可能です。

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

負の整数を使用します。

CSSグリッド仕様には、2つの興味深いセクションがあります。

7.1。Explicit Grid

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

そしてここ...

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;

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

9
Michael_B

実際に私のために働いた解決策はposition: absolute;最後まで成長させたい要素に。これには欠点がありますが、場合によっては命を救う可能性があります。完全な例を次に示します。

.grid {
  display: grid;
  grid-template: auto / auto 22px auto;
  position: relative;
}

.vline {
  position: absolute;
  height: 100%;
  width: 2px;
  background-color: black;
  grid-column: 2 / span 1;
  margin: 0 10px;
}

.grid h1:nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }
.grid p:nth-child(2) { grid-row: 2; grid-column: 1; text-align: right; }
.grid h1:nth-child(3) { grid-row: 3; grid-column: 3; }
.grid p:nth-child(4) { grid-row: 4; grid-column: 3; }
.grid h1:nth-child(5) { grid-row: 5; grid-column: 1; text-align: right; }
.grid p:nth-child(6) { grid-row: 6; grid-column: 1; text-align: right; }
.grid h1:nth-child(7) { grid-row: 7; grid-column: 3; }
.grid p:nth-child(8) { grid-row: 8; grid-column: 3; }
p, h1 { margin: 0; padding: 0; }
<div class="grid">
  <h1>1.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>2.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <h1>3.</h1>
  <p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>4.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <div class="vline"></div>
</div>
2
Fanus du Toit

そのため、まだ不可能と思われる場合は、構造を変更してグリッドをネストすることを選択できます。

JavaScriptを使用して、3番目のボックスを取り出して、元のグリッドコンテナーの前に配置します（事前に実行できない場合）。

.container {
    display: grid;
    grid-template-columns: 65% 35%;
}

.nested_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-template-rows: auto;
}

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

.side {
    background-color: yellow;
    grid-column: 1 -1;
    border: 1px solid red;
}
<div class="container">
    <div class="nested_grid">
        <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 class="box"></div>
        <div class="box"></div>
    </div>
    <div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>
0
Duck