CSSグリッド：最後の列を動的に広げる

Question

グリッド内の残りのスペースを占めるように最後の列を自動的に広げることは可能ですか？基本的に私はこれを達成しようとしています：

.row { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
} 
 

 
.col { 
 
    background: blue; 
 
    padding: 20px; 
 
    border: 1px solid red; 
 
} 
 

 
.col:last-child { 
 
    background: yellow; 
 
    /* missing magic here */ 
 
}

<div class="row"> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col"></div> 
 
</div>

Answer 1

残念ながら、CSSグリッドの現在のバージョンでユニバーサルソリューションとしてgrid-column: span auto/-1のような真の魔法が存在しないようです。

.row { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
} 
 

 
.col { 
 
    background: blue; 
 
    padding: 20px; 
 
    border: 1px solid red; 
 
} 
 

 
.col:last-child { 
 
    background: yellow; 
 
    grid-column-end: -1; 
 
} 
 
.col:nth-child(1):last-child { 
 
    grid-column-start: 1; 
 
} 
 
.col:nth-child(2):last-child { 
 
    grid-column-start: 2; 
 
}

<div class="row"> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col"></div> 
 
</div>