最後の行/列にグリッド項目を広げる

Question

行数がわからないときに、最初から最後までグリッド項目を広げることはできますか？

私には、未知数のボックスを持つ次のHTMLがあるとします。

.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>

Answer 1

あなたは、そのボックスの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）では問題の原因となる不適切な数の行が作成されます。

Answer 2

行数がわからない場合は、最初から最後までグリッド項目を分割することはできますか？

CSS Grid Module Level 1にこの機能がないようです。だから答えは "いいえ"、それは現在不可能です。

---

CSSグリッドは、グリッド領域のスパンに暗黙のグリッドのすべての列/行をすることはできませんが、それは明示的なグリッドで仕事をすることができます。

負の整数を使用します。ここで

は2つの興味深いのセクションでは、CSSグリッド仕様である：グリッド配置のプロパティで

7.1. The Explicit Grid

数値インデックスは、明示的なグリッドのエッジ から数えます。正のインデックスは開始側から数えて 、負のインデックスは最後の側から数えます。

ここ...

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

負の整数が与えられた場合、それは代わりに、明示的なグリッドの端縁から を開始、逆にカウントします。あなたはこれらのプロパティを使用して定義したグリッドである、明示的なグリッドを扱う換言すれば、

：

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

。グリッド領域をすべての列にまたがるようにするには、このルールを設定します。

grid-column: 3/-1; 

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

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

grid-column: 1/-3; 

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