1. Grid 속성

CSS 레이아웃을 잡을 때 display 속성 중 flex 혹은 gird 속성을 많이 사용한다.

두 속성의 차이점은 아래와 같다.

• Flex : 한 방향 레이아웃 시스템 (1차원)
• Grid : 두 방향(가로-세로) 레이아웃 시스템 (2차원)

그리드 용어를 정리해보면 아래와 같다.

• 그리드 컨테이너 (Grid Container) : display: grid를 적용하는, Grid의 전체 영역이다. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬된다고 생각하면 된다.
• 그리드 아이템 (Grid Item) : Grid 컨테이너의 자식 요소들입니다. 바로 이 아이템들이 Grid 규칙에 의해 배치되는 것이다. display: grid를 적용한 요소의 children을 말한다.
• 그리드 트랙 (Grid Track) : Grid의 행(Row) 또는 열(Column)
• 그리드 셀 (Grid Cell) : Grid의 한 칸을 가리킨다. display: grid를 적용한 요소의 children과 같이 <div>같은 실제 html 요소는 그리드 아이템이고, 이런 Grid 아이템 하나가 들어가는 “가상의 칸(틀)”이라고 생각하면 된다.
• 그리드 라인(Grid Line) : Grid 셀을 구분하는 선이다.
• 그리드 번호(Grid Number) : Grid 라인의 각 번호이다.
• 그리드 갭(Grid Gap) : Grid 셀 사이의 간격이다.
• 그리드 영역(Grid Area) : Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합이다.