<aside> <img src="/icons/cursor-click_gray.svg" alt="/icons/cursor-click_gray.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!
</aside>
이전에 CSS 레이아웃의 흐름에 대해 알려드렸던 내용을 기억하시나요? Flex와 Grid는 현대 웹 레이아웃의 양대산맥이며, 서로 다른 특징을 가지고 있습니다. 그렇기 때문에 두 가지가 어떻게 다른지 이해하고 있는 것이 중요합니다. Flex와 Grid를 적절하게 혼용하면 효과적으로 레이아웃을 구성할 수 있습니다.
❗️ 학습 우선순위는 Flex가 Grid보다 높습니다. Flex 사용에 먼저 익숙해진 다음에 Grid를 연습하면, 효과적으로 학습할 수 있을 것입니다.
flex는 1차원적인 구조 를 가지고 있습니다.
row 혹은 column 중 택1 하여 배치 방향을 결정할 수 있습니다.
반면 grid는 2차원적인 구조 를 가지고 있습니다.
row와 column 방향의 배치 방식을 동시에 설정할 수 있습니다.
display: grid를 이용해 grid가 적용된 요소는 다음과 같은 구조로 변경됩니다.
grid-container : grid가 적용된 요소
grid-item : grid가 적용된 요소의 자식 요소들