티스토리 뷰
123123
Grid Layout
Grid 레이아웃에 설명하기 전 개념되는 용어에 대해서 짚고 가려고 합니다.
Grid는 Container와 Item으로 구성됩니다.. Container는 Items를 포함한 개념입니다.
Grid Container는 행(Column)과 열(Row)로 구성됩니다.
Grid Line
행과 열을 구분짓는 선이며, 각 선이 1부터 시작되는 라인 number를 가집니다.
Grid Track
그리드 라인 사이의 행 또는 열 공간입니다.
Grid Cell
그리드 셀은 그리드 라인 사이에 묶여 있는 가장 작은 단위의 유닛입니다.
Grid Area
4개의 그리드 라인이 모여 그려지는 공간으로, 셀으로 이루어진 공간입니다.
Grid Gutters
로우와 컬럼 사이 간격을 Grid Gutter라고 합니다. 방향에 따라 Row Gutter, Column Gutter라고 합니다.
Grid vs Flexbox
Flex는 X축 혹은 Y축 중 하나의 축을 통해서만 요소를 배치하는데 Grid는 2차원 축(x축, y축) 모두를 사용해 컨텐츠의 크기와 위치를 배정할 수 있습니다.
Grid는 마크업 순서와 상관없이 시각적인 레이아웃을 변경하는 데 제약이 없으며, 미디어 쿼리와 상성이 좋습니다.
Grid 의 장점
Grid 를 활용하지 않으면 대개 마크업대로 레이아웃을 구현하게 되고, 레이아웃을 마크업대로 하지않는 것은 구현하기 복잡합니다. 그러나 Grid레이아웃은 마크업의 순서대로 레이아웃을 구성하지 않는 데 큰 어려움이 없습니다. 레이아웃 구성에 대한 순서를 조정해주면 됩니다.
( 그러나 접근성을 중요시해야하는 서비스인 경우, 마크업의 순서가 어그러져 있다면 영향을 받을 수 있겠습니다. )
CSS Grid 속성
Grid Container
그리드 컨테이너는 그리드 시스템 영역을 구축합니다. overflow 속성은 컨테이너에 적용이 가능하지만, float, clear, vertical-align 속성은 그리드 아이템에 영향을 주지 않습니다. 하지만 float속성은 컨테이너 내에 계산된 display 속성을 가진 컨테이너의 자식 요소에 영향을 미칩니다.
display
display: grid;
display: inline-grid블록 그리드와 인라인 그리드가 있습니다.
Grid Item
그리드 아이템에 float속성은 적용되지않습니다. 태그 없이 컨테이너 내에 텍스트만 있더라도 암묵적 그리드 아이템이 됩니다.
Grid Template Rows/Columns
grid-template-rows <line-name> <track-size>
<line-name> 사용자가 설정한 임의의 선 이름
<track-size> 그리드에서 사용가능한 공간의 길이 (px, rem, em, %, fr 등)
grid container 예시
.grid-container {
display: grid;
grid-template-columns: [row-1] 200px [row-2] 100px [row-3] 3fr [row-last] 1fr;
}- line에 대해 이름을 정할 경우 내부에 공백을 주면 됩니다.*fr 은 유연한 크기를 갖는 단위. 그리드 컨테이너 내의 남은 공간 비율을 분수(fraction)으로 나타냅니다.
- 반복되면 repeat함수를 사용할 수 있습니다.
fr 예시
.grid-container {
display: grid;
grid-template-columns: 200px 100px 3fr 1fr;
}전체 컨테이너 넓이에서 300px을 뺀 나머지의 넓이에서 3/4와 1/4를 분할합니다.
repeat 함수 예시
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas
그리드 x축 라인과 y축 라인으로 둘러싸여진 셀들을 병합합니다.
grid-template-areas <grid-area-name>
| grid-template-areas | <grid-area-name> | |
| . | 비어있는 그리드 셀 | |
| none | 그리드 영역으로 정의되지 않은 셀 |
none과 . 은 다릅니다. none은 그리드 영역으로 정의되지않은 셀입니다.
.container{
display:grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"sub1 sub2 sub3"
"sub4 sub5 sub6"
"footer footer footer";
}
.grid-header{
grid-area: header;
}
.grid-sub1{
grid-area: sub1;
}
...
.grid-footer{
grid-area: footer;
}
grid-template 속기형
그리드 컨테이너는 위 세가지 속성을 대개 가지고 있는데 이 세 가지를 하나의 속성으로 표현할 수 있습니다.
| grid-template | none | 3가지 설정 모두 초기값 |
| <grid-template-rows> / <grid-template-columns> | ||
| 라인이름(옵션) 영역이름(필수) 트랙크기(옵션) 라인이름(옵션) |
예시
.container{
display: grid;
grid-template:
[row-1-start] 1fr "header header header" [row-1-end]
[row-2-start] 1fr "sub1 sub2 sub3" [row-2-end]
[row-3-start] 1fr "sub4 sub5 sub6" [row-3-end]
[row-4-start] 1fr "footer footer footer" [row-4-end]
}
Grid gutter
그리드 사이의 간격을 조정하는 속성입니다.
row-gap <line-size>
column-gap <line-size>
속기형
gap <grid-row-gap><grid-column-gap>
Grid에 사용하는 속성과 함수 정리
| 속성 |
| fr |
| 함수 |
| repeat |
repeat
'css' 카테고리의 다른 글
| gnb hover 시에 하위 depth항목들 위치 조정 (0) | 2017.07.09 |
|---|---|
| text-indent not working (0) | 2017.06.03 |