I have a fixed number of columns in a CSS Grid layout and have elements to be placed in these columns. The number of elements to be placed is less than the number of columns.

I want the columns to be aligned to the right, in the order the elements were added. In the following code, there are 4 elements aligned to the left with 6 empty elements to the right:

.hello { border-style: solid; border-color: blue; } .container { display: grid; grid-gap: 5px; grid-template-columns: repeat(10, 5rem); }

 
1
 
2
 
3
 
4
 

I want to change the layout above to:

empty empty empty empty empty empty 1 2 3 4

I tried various combinations of [align,justify]-[content,items], but none of them achieved the effect of right alignment. Can CSS Grid achieve this?