CSS Grid
; 2차원(행과 열)의 레이아웃 시스템을 제공.
예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈.
Grid Properties
; CSS Grid는 CSS Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분.
Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치.
-
[Grid Container]
display
; 그리드를 사용하기 위해 컨테이너에 필수로 작성.
grid : Block 특성의 Grid Container를 정의.
inline-grid : Inline 특성의 Grid Container를 정의.
grid-template-columns
; 명시적 열(track)의 크기를 정의. 동시에 라인(line)의 이름도 정의.
fr(fraction, 공간 비율) 단위 사용 가능. repeat() 함수 사용 가능.
grid-template-rows
; 명시적 행(track)의 크기를 정의. 동시에 라인(line)의 이름도 정의.
fr(fraction, 공간 비율) 단위 사용 가능. repeat() 함수 사용 가능.
grid-column
; 열과 항목이 확장할 열 수를 지정. grid-column-start 와 grid-column-end 의 단축 속성. 각 속성을 / 로 구분.
grid-row
; 행과 항목이 확장할 행 수를 지정. grid-row-start 와 grid-row-end 의 단축 속성. 각 속성을 / 로 구분.
grid-template-areas
; 지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성.
grid-area는 Grid Container가 아닌 Grid Item에 적용하는 속성.
row-gap(grid-row-gap)
; 각 행과 행 사이의 간격(Gutter)을 지정.
column-gap(grid-column-gap)
; 각 열과 열 사이의 간격(Gutter)을 지정.
gap(grid-gap)
; 각 행과 행, 열과 열 사이의 간격을 지정.
grid-auto-row
; 암시적 행의 크기를 정의.
grid-auto-column
; 암시적 열의 크기를 정의.
grid-auto-flow
; 배치하지 않은 아이템(Item)을 어떤 방식의 '자동 배치 알고리즘'으로 처리할지 정의. 배치한 아이템은 grid-area(이하 개별 속성 포함)를 사용한 아이템을 의미.
row : 각 행 축을 따라 차례로 배치.
column : 각 열 축을 따라 차례로 배치.
row dense(dense): 각 행 축을 따라 차례로 배치. 빈 영역 메움!
column dense : 각 열 축을 따라 차례로 배치. 빈 영역 메움!
grid-template-rows
; 명시적 행의 크기를 정의. 동시에 라인의 이름도 정의할 수 있음.
fr(fraction, 공간 비율) 단위를 사용할 수 있음. repeat() 함수를 사용할 수 있음.
grid-template-columns
; 명시적 열의 크기를 정의. 동시에 라인의 이름도 정의할 수 있음.
fr(fraction, 공간 비율) 단위를 사용할 수 있음. repeat() 함수를 사용할 수 있음.
grid-row
; grid-row-start 와 grid-row-end 의 단축 속성.
각 속성을 / 로 구분.
grid-column
; grid-column-start 와 grid-column-end 의 단축 속성.
각 속성을 / 로 구분.
grid-area
; grid-row-start, grid-column-start, grid-row-end, grid-column-end 의 단축 속성.
row 시작 / column 시작 / row 끝 / column 끝
영역의 이름을 설정할 경우 grid-row 와 grid-column 개념은 무시됨.
grid-template
; grid-template-rows, grid-template-columns, grid-template-areas의 단축 속성.
align-content
; 그리드 콘텐츠(Contents)를 수직(열 축) 정렬. 그리드 콘텐츠의 세로 너비가 그리드 컨테이너(Container)보다 작아야 함.
normal : stretch 와 같음.
start : 시작점(위쪽) 정렬.
center : 수직 가운데 정렬.
end : 끝점(아래쪽) 정렬.
space-around : 각 행 위아래에 여백을 고르게 정렬.
space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬.
space-evenly : 모든 여백을 고르게 정렬.
stretch : 열 축을 채우기 위해 그리드 콘텐츠를 늘림.
justify-content
; 그리드 콘텐츠(Contents)를 수평(행 축) 정렬. 그리드 콘텐츠의 가로 너비가 그리드 컨테이너(Container)보다 작아야 함.
normal : stretch 와 같음.
start : 시작점(왼쪽) 정렬.
center : 수평 가운데 정렬.
end : 끝점(오른쪽) 정렬.
space-around : 각 행 위아래에 여백을 고르게 정렬.
space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬.
space-evenly : 모든 여백을 고르게 정렬.
stretch : 행 축을 채우기 위해 그리드 콘텐츠를 늘림.
align-items
; 그리드 아이템(Items)를 수직(열 축) 정렬. 그리드 아이템의 세로 너비가 그리드 행(Track)보다 작아야 함.
normal : stretch 와 같음.
start : 시작점(위쪽) 정렬.
center : 수직 가운데 정렬.
end : 끝점(아래쪽) 정렬.
stretch : 열 축을 채우기 위해 그리드 아이템을 늘림.
justify-items
; 그리드 아이템(Items)를 수평(행 축) 정렬. 그리드 아이템의 가로 너비가 그리드 열(Track)보다 작아야 함.
normal : stretch 와 같음.
start : 시작점(왼쪽) 정렬.
center : 수평 가운데 정렬.
end : 끝점(오른쪽) 정렬.
stretch : 행 축을 채우기 위해 그리드 아이템을 늘림.
align-self
; 단일 그리드 아이템(Item)을 수직(열 축) 정렬. 그리드 아이템의 세로 너비가 자신이 속한 그리드 행(Track)보다 작아야 함.
normal : stretch 와 같음.
start : 시작점(위쪽) 정렬.
center : 수직 가운데 정렬.
end : 끝점(아래쪽) 정렬.
stretch : 열 축을 채우기 위해 그리드 아이템을 늘림.
justify-self
; 단일 그리드 아이템(Item)을 수평(행 축) 정렬. 그리드 아이템의 가로 너비가 자신이 속한 그리드 열(Track)보다 작아야 함.
normal : stretch 와 같음.
start : 시작점(왼쪽) 정렬.
center : 수평 가운데 정렬.
end : 끝점(오른쪽) 정렬.
stretch : 행 축을 채우기 위해 그리드 아이템을 늘림.
order
; 그리드 아이템이 자동 배치되는 순서를 변경할 수 있음. 숫자가 작을수록 앞서 배치됨.
z-index
; 아이템이 쌓이는 순서를 변경할 수 있음.
-
[Grid Function]
repeat
; 행/열(track)의 크리 정의를 반복. '반복되는 횟수'와 '행/열의 크기 정의'를 인수로 사용.
grid-template-rows, grid-template-columns 에서 사용.
minmax
; 행/열(track)의 '최소/최대 크기'를 정의. 첫 번째 인수는 '최소값'이고 두 번째 인수는 '최대값'.
grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns 에서 사용.
일반 요소에 min-width, max-width 속성을 동시 지정하는 것과 유사함.
fit-content
; 행/열(track)의 크기를 그리드 아이템(Item)이 포함하는 내용(Contents) 크기에 맞춤.
'내용의 최대 크기'를 인수로 사용. 최대 크기로 제한.
minmax(auto, max-content)와 유사.
-
[Grid Unit]
fr
; fr(Fractional unit)은 사용 가능한 공간에 대한 비율을 의미.
min-content
; 그리드 아이템이 포함하는 내용(Contents)의 최소 크기를 의미.
max-content
; 그리드 아이템이 포함하는 내용(Contents)의 최대CSS Grid
auto-fill / auto-fit
; 행/열(Track)의 개수를 그리드 컨테이너(Container) 및 행/열 크기에 맞게 자동으로(암시작) 조정.
repeat() 함수와 같이 사용하며 행/열과 아이템(Item) 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용.(반응형 그리드)
auto-fill 과 auto-fit 은 간단한 차이점을 제외하면 동일하게 동작함.
*반응형에 가까운 컨테이너의 사이즈가 가변할 때 아이템의 개수와 크기를 자동으로 조정.
auto-fill 과 auto-fit 의 차이
; 그리드 컨테이너가 하나의 행/열(Track)에 모든 아이템을 수요하고 "남는 공간이 있을 때" 발생.
auto-fill 은 남는 공간(빈 트랙)을 그대로 유지.
auto-fit 은 남는 공간을 축소.
'::public > HTML & CSS(SCSS)' 카테고리의 다른 글
| SCSS - 주석 (0) | 2021.07.02 |
|---|---|
| SCSS? (0) | 2021.05.10 |
| CSS - Flex(Flexible Box) (0) | 2021.04.20 |
| CSS - 애니메이션&다단 (0) | 2021.04.12 |
| CSS - 속성(전환&변환) (0) | 2021.04.09 |