grid 시스템에 대해 알아보자.
grid
디자인 공간을 일정한 행과 열로 분할하여, 콘텐츠를 체계적이고 일관되게 배치할 수 있도록 돕는 레이아웃 도구입니다.
장점
일관성
레이아웃의 구조가 명확해져 디자인 전반에 걸쳐 일관된 정렬과 간격을 유지할 수 있습니다.
반응형 디자인
다양한 화면 크기에 맞춰 열과 행의 비율, 간격 등을 쉽게 조정할 수 있습니다.
유지보수 용이
레이아웃이 미리 정의된 그리드 구조에 기반하므로, 요소의 추가나 변경이 용이합니다.
디자인 협업
개발자와 디자이너 간의 커뮤니케이션이 원활해져, 시안에 따른 실제 구현이 더 쉬워집니다.
주요 개념
컨테이너 (Container) : 전체 그리드 레이아웃을 감싸는 부모 요소
행 (Row) : 수평으로 나뉘는 영역
열 (Column) : 수직으로 나뉘는 영역으로, 콘텐츠가 배치되는 기본 단위
트랙 (Tracks) : 행과 열의 집합
셀 (Cells) : 한 행과 한 열이 만나는 교차 영역
간격 (Line) : 행과 열 사이의 간격
grid-template 속성
fr (fraction, 공간 비율) 단위사용 가능repeat() 함수사용 가능
fr 단위는 가용 공간을 분할하는 단위입니다.
grid-template-columns: 1fr 2fr;이라고 지정하면, 전체 가용 공간을 3개의 동일한 부분으로 나누고 첫 번째 열은 그 중 1개, 두 번째 열은 2개의 비율만큼 공간을 차지하게 됩니다.
- grid-template-rows : 명시적 행(Row)의 크기를 정의
- grid-template-columns : 명시적 열(Column)의 크기를 정의
- grid-template : 단축 속성
1
2
3
4
5
6
7
8
.container {
width: 400px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
/* grid-template : repeat(3, 100px), repeat(3, 1fr); 로 사용 가능*/
}
gap 속성
- row-gap 행과 행 사이의 간격 (Line)을 정의
- column-gap 열과 열 사이의 간격 (Line)을 정의
- gap 단축 속성
1
2
3
4
5
6
.container {
display: grid;
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(3, 1fr);
gap: 20px 10px;
}
place-content 속성
align-content와 justify-content의 단축 속성
하나의 값만 입력하면 두 속성에 모두 적용됩니다.
- align-content : 그리드 컨테이너 (Container) 수직(열 축) 정렬
- justify-content : 그리드 컨테이너 (Container) 수평(행 축) 정렬
- start : 시작점(위쪽) 정렬
- center : 수직 가운데 정렬
- end : 끝점(아래쪽) 정렬
- space-around : 각 행 위아래에 여백을 고르게 정렬
- space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
- space-evenly : 모든 여백을 고르게 정렬
- stretch : 열 축을 채우기 위해 그리드 콘텐츠를 늘림
- normal : stretch와 같습니다.
place-items 속성
align-items와 justify-items의 단축 속성
- align-items : 그리드 아이템 (Items) 수직(열 축) 정렬
- justify-items : 그리드 아이템 (Items) 수평(행 축) 정렬
- start : 시작점(위쪽) 정렬
- center : 수직 가운데 정렬
- end : 끝점(아래쪽) 정렬
- stretch : 열 축을 채우기 위해 그리드 콘텐츠를 늘림
- normal : stretch와 같습니다.
