CSS Grid

Grid는 두 방향(가로-세로) 레이아웃 시스템이며 비슷한 속성인 Flex는 한 방향 레이아웃 시스템

부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부른다.

Flex와 마찬가지로, Grid는 컨테이너에 display: grid; 를 설정하는 것으로 시작

그리드 형태 정의

• grid-template-rows 행(row)의 배치

• grid-template-columns 열(column)의 배치

fr은 fraction(뜻은 여기로)이며, 숫자 비율대로 트랙의 크기를 나눈다.

예시로 1fr 1fr 1fr은 균일하게 1:1:1 비율인 3개의 column을 만들겠다는 의미

repeat 함수

repeat는 반복되는 값을 자동으로 처리할 수 있는 함수.

repeat(반복횟수, 반복값)

즉, 위 코드의 repeat(5, 1fr)은 1fr 1fr 1fr 1fr 1fr과 같다.