CSS Grid
Grid Container Properties
- display : 그리드 컨테이너(Container)를 정의
- grid : Block 특성의 Grid Container를 정의
- inline-grid : Inline 특성의 Grid Container를 정의
- grid-template-rows : 명시적 행(Track)의 크기를 정의
1행크기 2행크기 ...;
[선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
repeat(행크기 반복수, 행크기); - grid-template-columns : 명시적 열(Track)의 크기를 정의
1행크기 2행크기 ...;
[선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
repeat(행크기 반복수, 행크기); - grid-template-areas : 영역(Area) 이름을 참조해 템플릿 생성
.container {
"header header header"
"main main aside"
"main main ."
"footer footer footer"
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; } - grid-template : grid-template-xxx의 단축 속성
.container {
grid-template:
[1행시작선이름] "AREAS" 행너비 [1행끝선이름]
[2행시작선이름] "AREAS" 행너비 [2행끝선이름]
/ <grid-template-columns>;
}.container {
display: grid;
grid-template:
"header header header" 80px
"main main aside" 350px
"footer footer footer" 130px
/ 2fr 100px 1fr;
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; } - row-gap : 행과 행 사이의 간격(Line)을 정의
- column-gap : 열과 열 사이의 간격(Line)을 정의
- gap :
gap: <grid-row-gap> <grid-column-gap>;
- grid-auto-rows : 암시적인 행(Track)의 크기를 정의
grid-auto-rows: 100px;
- grid-auto-columns : 암시적인 열(Track)의 크기를 정의
grid-auto-columns: 100px;
- grid-auto-flow : 자동 배치 알고리즘 방식을 정의
- row : 각 행 축을 따라 차례로 배치 (기본값)
- column : 각 열 축을 따라 차례로 배치
- row dense(dense) : 각 행 축을 따라 차례로 배치, 빈 영역 메움!
- column dense : 각 열 축을 따라 차례로 배치, 빈 영역 메움!
- grid : grid-template-xxx과 grid-auto-xxx의 단축 속성
grid: <grid-template>;
grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>; - align-content 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
- normal : stretch와 같습니다. (기본값)
- start : 시작점(위쪽) 정렬
- center : 수직 가운데 정렬
- end : 끝점(아래쪽) 정렬
- space-around : 각 행 위아래에 여백을 고르게 정렬
- space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
- space-evenly : 모든 여백을 고르게 정렬
- stretch : 열 축을 채우기 위해 그리드 콘텐츠를 늘림
- justify-content 그리드 콘텐츠를 수평(행 축) 정렬
- normal : stretch와 같습니다. (기본값)
- start : 시작점(왼쪽) 정렬
- center : 수평 가운데 정렬
- end : 끝점(오른쪽) 정렬
- space-around : 각 열 좌우에 여백을 고르게 정렬
- space-between : 첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
- space-evenly : 모든 여백을 고르게 정렬
- stretch : 행 축을 채우기 위해 그리드 콘텐츠를 늘림
- place-content : align-content와 justify-content의 단축 속성
place-content: <align-content> <justify-content>;
- align-items : 그리드 아이템(Items)들을 수직(열 축) 정렬
- normal : stretch와 같습니다. (기본값)
- start : 시작점(위쪽) 정렬
- center : 수직 가운데 정렬
- end : 끝점(아래쪽) 정렬
- stretch : 열 축을 채우기 위해 그리드 아이템을 늘림
- justify-items : 그리드 아이템들을 수평(행 축) 정렬
- normal - stretch와 같습니다. (기본값)
- start - 시작점(왼쪽) 정렬
- center - 수평 가운데 정렬
- end - 끝점(오른쪽) 정렬
- stretch - 행 축을 채우기 위해 그리드 아이템을 늘림
- place-items : align-items와 justify-items의 단축 속성
place-items: <align-items> <justify-items>;
Grid Item Properties
.item:nth-child(1) {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
}
.item:nth-child(1) {
grid-row-start: row-2nd;
grid-row-end: row-3rd;
grid-column-start: col-2nd;
grid-column-end: col-4th;
}
.item:nth-child(1) {
grid-row-start: 1;
grid-row-end: span 2;
grid-column-start: 2;
/* grid-column-end: span 1; (생략) */
}
.item:nth-child(1) {
/* grid-row-start: span 1; (생략) */
grid-row-end: 3;
grid-column-start: span 2;
grid-column-end: 4;
}
- grid-row-start : 그리드 아이템(Item)의 행 시작 위치 지정
- grid-row-end : 그리드 아이템의 행 끝 위치 지정
- grid-row : grid-row-xxx의 단축 속성(행 시작/끝 위치)
<grid-row-start> / <grid-row-end>;
- grid-column-start : 그리드 아이템의 열 시작 위치 지정
- grid-column-end : 그리드 아이템의 열 끝 위치 지정
- grid-column : grid-column-xxx의 단축 속성(열 시작/끝 위치)
grid-column: <grid-column-start> / <grid-column-end>;
- grid-area : 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
grid-area: 영역이름; - align-self : 단일 그리드 아이템을 수직(열 축) 정렬
- normal : stretch와 같습니다. (기본값)
- start : 시작점(위쪽) 정렬
- center : 수직 가운데 정렬
- end : 끝점(아래쪽) 정렬
- stretch : 열 축을 채우기 위해 그리드 아이템을 늘림
- justify-self : 단일 그리드 아이템을 수평(행 축) 정렬
- normal : stretch와 같습니다. (기본값)
- start : 시작점(왼쪽) 정렬
- center : 수평 가운데 정렬
- end : 끝점(오른쪽) 정렬
- stretch : 행 축을 채우기 위해 그리드 아이템을 늘림
- place-self : align-self와 justify-self의 단축 속성
place-self: <align-self> <justify-self>;
- order : 그리드 아이템의 배치 순서를 지정, 숫자가 작을수록 앞
- z-index : 그리드 아이템의 쌓이는 순서를 지정
Grid Function
- repeat(반복횟수, 내용)
.container {
grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px;
}
.container {
grid-template-columns: repeat(9, 100px);
} - minmax(최소, 최대)
grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
- fit-content(최대 크기)
grid-template-columns: fit-content(300px) fit-content(300px);
- auto-fill : 남는 공간 유지
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
- auto-fit : 남는 공간 축소
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
Units
- fr
- min-content : 내용 최소 크기
- word-break: keep-all (한글 사용 때)
- max-content : 내용 최대 크기