CSS Grid 레이아웃은 웹 페이지의 요소들을 두 차원으로 배치할 수 있는 강력한 기능입니다. 이 레이아웃 모델을 활용하면 복잡한 디자인도 간단하게 구현할 수 있습니다.
Grid 컨테이너 생성
HTML 요소를 그리드 컨테이너로 만들기 위해서는 display 속성에 grid 값을 설정해야 합니다. 여기서 부모 요소는 컨테이너가 되고, 자식 요소들은 아이템으로 간주됩니다.
.container {
display: grid;
}열과 행 정의
컨테이너 내부의 열을 정의하려면 grid-template-columns 속성을 사용합니다. 아래 예제는 두 개의 50px 폭의 열을 만듭니다.
.container {
display: grid;
grid-template-columns: 50px 50px;
}마찬가지로 grid-template-rows 속성을 통해 행을 정의할 수 있습니다.
.container {
display: grid;
grid-template-columns: 50px 50px;
grid-template-rows: 50px 50px;
}단위 사용
CSS Grid에서는 절대 단위(px 등)와 상대 단위(em 등) 모두 사용 가능하며, 추가로 다음과 같은 특수 단위도 지원합니다:
- fr: 남은 공간을 비율로 분배
- auto: 내용 크기에 따라 자동 조정
- %: 부모 요소 크기의 백분율로 설정
grid-template-columns: 1fr 100px 2fr;간격 설정
열 간격은 grid-column-gap 속성을 통해, 행 간격은 grid-row-gap 속성을 통해 조절할 수 있습니다. 또는 grid-gap 속성을 사용해 한 번에 설정할 수도 있습니다.
grid-column-gap: 20px;
grid-row-gap: 5px;
grid-gap: 10px 20px;요소 위치 지정
요소가 차지할 열의 범위는 grid-column 속성을 사용하여 지정할 수 있으며, 행의 범위는 grid-row 속성을 통해 설정합니다.
grid-column: 2 / 4;
grid-row: 2 / 4;정렬 방식
각 요소 내부의 내용 정렬은 justify-self (수평)과 align-self (수직) 속성을 통해 조절할 수 있습니다.
justify-self: center;
align-self: end;전체 요소들의 정렬 방식은 각각의 요소에 대해 설정하는 대신, 컨테이너에 justify-items와 align-items 속성을 적용하여 일괄적으로 조정할 수 있습니다.
justify-items: center;
align-items: end;영역 정의
여러 셀을 하나의 영역으로 묶고 이름을 붙이기 위해 grid-template-areas 속성을 사용합니다.
grid-template-areas:
"header header header"
"advert content content"
"advert footer footer";정의된 영역에는 grid-area 속성을 사용해 요소를 배치할 수 있습니다.
.item1 {
grid-area: header;
}반복 구조
repeat() 함수를 사용하면 특정 패턴을 반복해서 정의할 수 있습니다.
grid-template-columns: repeat(2, 1fr, 50px) 20px;최소 최대 크기 제한
minmax() 함수를 사용하여 요소의 크기를 최소 및 최대값 사이로 제한할 수 있습니다.
grid-template-columns: 100px minmax(50px, 200px);자동 배치
auto-fill 또는 auto-fit 키워드를 사용하면 컨테이너 크기에 따라 자동으로 열이나 행을 배치할 수 있습니다.
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));중첩 그리드
하나의 요소를 그리드로 만들면 그 하위 요소들만이 그리드 내부에서 작동합니다. 따라서 중첩된 그리드 구조를 만들 수 있습니다.
.parent {
display: grid;
grid-template-columns: auto 1fr;
}