그리드 요소를 오른쪽 정렬하는 방법

Question

CSS 그리드 레이아웃에 고정된 수의 열이 있고 이 열에 배치할 요소가 있습니다. 배치할 요소의 개수가 열의 개수보다 적습니다.

요소가 추가된 순서대로 열을 오른쪽으로 정렬하고 싶습니다. 다음 코드에는 왼쪽에 4개의 요소가 정렬되어 있고 오른쪽에 6개의 빈 요소가 있습니다.

<code>.hello {
  테두리 스타일: 단색;
  테두리 색상: 파란색;
}

.컨테이너 {
  디스플레이: 그리드;
  그리드 간격: 5px;
  그리드 템플릿 열: 반복(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 그리드가 이를 달성할 수 있나요? 
            

Answer 1

수량이 제한되어 있으므로 수동으로 정의할 수 있습니다

으아악 으아악

하지만 Flexbox를 사용하는 것이 더 좋습니다:

으아악 으아악