グリッド要素を右揃えにする方法

Question

CSS グリッド レイアウトには固定数の列があり、これらの列に要素を配置します。配置する要素の数は列の数よりも少なくなります。

要素が追加された順序で列を右揃えにしたいと考えています。次のコードでは、4 つの要素が左に整列され、6 つの空の要素が右に配置されています。

<code>.hello {
  ボーダースタイル: ソリッド;
  境界線の色: 青;
}

。容器 {
  表示: グリッド;
  グリッドギャップ: 5px;
  グリッドテンプレート列:repeat(10, 5rem);
}</code>

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

上記のレイアウトを次のように変更したいと思います:

空 空 空 空 空 1 2 3 4
[align,justify]-[content,items] のさまざまな組み合わせを試しましたが、どれも右揃えの効果を達成できませんでした。 CSS Grid はこれを実現できるでしょうか? 
            

Answer 1

数が限られているため、手動で定義できます

リーリー リーリー

ただし、フレックスボックスを使用する方が良いでしょう:

リーリー リーリー