Flex와 Grid는 현대 웹 레이아웃의 양대산맥이며, 서로 다른 특징을 가지고 있습니다. 그렇기 때문에 두 가지가 어떻게 다른지 이해하고 있는 것이 중요합니다. Flex와 Grid를 적절하게 혼용하면 효과적으로 레이아웃을 구성할 수 있습니다.
grid-container : grid가 적용된 요소
grid-item : grid가 적용된 요소의 자식 요소들
grid-line : grid-item 사이의 경계를 의미합니다.
grid-number : 해당 grid-line이 몇번째 line인지를 의미합니다.
grid-template
grid의 행&열의 개수 및 크기를 지정할 수 있습니다.
grid-template-rows : 1fr 2fr 200px;
grid-template-columns : 1fr 2fr 200px;
위와 같은 형태로 사용이 가능하며, row는 행의 템플릿을, columns는 열의 템플릿을 지정합니다.
단위: fr
이 때 사용되는 fr 이란 fraction(분수)의 약자입니다.
분수라는 이름의 뜻으로 유추할 수 있듯 grid-template에서 사용할 수 있는 비율 단위입니다.
예시를 통해 fr이 실제로 어떻게 적용되는지 살펴봅시다.
repeat()
grid-template에는 repeat() 이라는 반복 함수도 써줄 수 있습니다.
repeat(a, b)라고 입력하면, b규격의 grid-template을 a개 생성한다는 의미가 됩니다.
grid-template-columns: repeat(4, 1fr);
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap 및 row-gap
열과 행 사이의 간격을 설정합니다. column-gap 은 열 사이에, row-gap 은 행 사이에 50픽셀 간격을 줍니다.
column-gap: 50px;
row-gap: 50px;
place-items
그리드 항목을 컨테이너 내에서 정렬합니다. place-items: center start;는 상하 방향은 가운데, 좌우 방향은 왼쪽에 정렬합니다.
place-items: center start; /* 상자아이템 각각 정렬 => 상하:좌우 */
place-content
그리드 컨테이너 전체의 위치를 조정합니다. place-content: end center;는 그리드 컨테이너 내의 전체 내용이 상하 방향은 아래쪽, 좌우 방향은 가운데에 정렬됩니다.
place-items: center start; /* 상자아이템 각각 정렬 => 상하:좌우 */