리엑트 컴포넌트들을 배치하기 위해 가장 편하고, 직관적인 방법이라고 생각했습니다.
플렉스 박스의 구조는 기본적으로 다음과 같습니다.
<div class="flex container" display="flex">
<div class="item1"/>
<div class="item2"/>
...
</div>
플렉스 박스 컨테이너 안에 플렉스 박스 요소들이 있는 구조이고, 플렉스 박스 안에 있는 요소들의 위치를 원하는 대로 배치하는 것이 핵심기능입니다.
요소들을 배치하는 방법은 크게 두가지 입니다.
그리드는 플렉스 박스와 마찬가지로 그리드 컨테이너 안에 그리드 아이템들이 있는 구조입니다.
<div class="grid container" display="grid">
<div class="item1"/>
<div class="item2"/>
...
</div>
또한 플렉스 박스와 마찬가지로 조작 방법이 컨테이너와 각 요소들을 조작하는 두 가지 방법이 있습니다.
메인축 또는 수직인 축을 기준으로 1차원적인 정렬을 하는 플렉스 박스와는 달리, 그리드는 row
와 column
이라는 가상의 공간을 grid-template-rows
와 grid-template-columns
를 통해 설정하고 각각의 공간에 원하는 컴포넌트를 넣을 수 있습니다. 이외에도 간격과 각각의 셀에 대한 커스터마이징이 가능합니다.