그리드 요소를 오른쪽 정렬하는 방법
<p>CSS 그리드 레이아웃에 고정된 수의 열이 있고 이 열에 배치할 요소가 있습니다. 배치할 요소의 개수가 열의 개수보다 적습니다. </p>
<p>요소가 추가된 순서대로 열을 오른쪽으로 정렬하고 싶습니다. 다음 코드에는 왼쪽에 4개의 요소가 정렬되어 있고 오른쪽에 6개의 빈 요소가 있습니다. </p>
<p><br /></p>
<pre class="snippet-code-css lang-css Prettyprint-override"><code>.hello {
테두리 스타일: 단색;
테두리 색상: 파란색;
}
.컨테이너 {
디스플레이: 그리드;
그리드 간격: 5px;
그리드 템플릿 열: 반복(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 그리드가 이를 달성할 수 있나요? </p>
