Grid1 CSS 레이아웃 배치하기 - Grid Grid 지난 Flex 포스팅에 이어서 이번에는 Grid입니다. 격자라는 의미를 가진 Grid는 그 이름처럼 판 위에 가로 행과 세로 행을 기준으로 요소들을 배치할 수 있습니다. table과도 비슷한 면이 있는데, 보다 다양한 레이아웃의 구성을 더 쉽게 할 수 있다는 특징이 있습니다. 예를 들면 자식 요소들끼리 겹치게 배치되는 형태도 간단히 구현할 수 있게 됩니다. Grid도 Flex와 마찬가지로, 부모가 될 요소에 display: grid; 속성을 할당하는 것으로 간단히 적용할 수 있습니다. Grid container의 형태 결정하기 위에서 Grid는 가로 행과 세로 행을 기준으로 요소를 배치한다고 설명했습니다. 따라서 한 쪽만 지정하는 Flex 컨테이너와는 다르게, Grid 컨테이너는 가로와 세로의 .. 2022. 4. 24. 이전 1 다음