グリッド要素を右揃えにする方法
<p>CSS グリッド レイアウトには固定数の列があり、これらの列に要素を配置します。配置する要素の数は列の数よりも少なくなります。 </p>
<p>要素が追加された順序で列を右揃えにしたいと考えています。次のコードでは、4 つの要素が左に整列され、6 つの空の要素が右に配置されています。
<p><br /></p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hello {
ボーダースタイル: ソリッド;
境界線の色: 青;
}
。容器 {
表示: グリッド;
グリッドギャップ: 5px;
グリッドテンプレート列:repeat(10, 5rem);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container">
<div class="hello">1</div>
<div class="hello">2</div>
<div class="hello">3</div>
<div class="hello">4</div>
</div></code></pre>
<p><br /></p>
<p>上記のレイアウトを次のように変更したいと思います: </p>
<pre class="brush:php;toolbar:false;">空 空 空 空 空 1 2 3 4
<p><code>[align,justify]-[content,items]</code> のさまざまな組み合わせを試しましたが、どれも右揃えの効果を達成できませんでした。 CSS Grid はこれを実現できるでしょうか? </p>
