[CSS] 레이아웃 Grid 총정리

CSS 레이아웃의 끝판왕이라고 할 수 있는 Grid(그리드) 튜토리얼에 잘 오셨습니다! 앞서 공부한 Flex와 지금 공부할 Grid의 큰 차이점은 Flex는 한 방향 레이아웃 시스템이고 (1차원) Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) 이라는 점입니다. 따라서 Flex보다 더 복합적인 레이아웃 표현이 가능하지요. Grid 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같습니다. Flex와 마찬가지로, 컨테이너와 아이템이 있으면 됩니다. A B C D E F G H I 부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부릅니다. “컨테이너가 Grid의 영향을 받..

2023.10.11