コンテナの最後にグリッド要素を配置する方法
<p>グリッド コンテナーがあり、項目を一番下に置きたいと考えています。 </p>
<p>これは実物を持っています</p>
<p>これが欲しいです
期待</p>
<p>
<pre class="brush:css;toolbar:false;">.container {
表示: グリッド;
グリッド テンプレート列:repeat(14, 1fr);
グリッドテンプレート行:repeat(6, 1fr);
グリッドギャップ: 8px;
幅: 200ピクセル;
背景: 青;
}
。アイテム {
背景色: 赤;
色: 白;
}
.item-1 {
グリッド列: スパン 5;
グリッド行: スパン 6;
}
.item-2 {
グリッド列: スパン 4;
グリッド行: スパン 5;
}
.item-3 {
グリッド列: スパン 3;
グリッド行: スパン 4;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<div class="item item-1">item 1</div>
<div class="item item-2">item 2</div>
<div class="item item-3">item 3</div>
</div></pre>
</p>
<p>追記: place-items: end; と align-items: end;</p> を試してみました。
