Grid
2차원의 레이아웃 시스템 제공
Container와 items로 구성
Container 속성
Grid Container Properties
display 그리드 컨테이너(Container)를 정의
grid-template-rows 명시적 행(Track)의 크기를 정의
grid-template-columns 명시적 열(Track)의 크기를 정의
grid-template-areas 영역(Area) 이름을 참조해 템플릿 생성
grid-template grid-template-xxx의 단축 속성
row-gap(grid-row-gap) 행과 행 사이의 간격(Line)을 정의
column-gap(grid-column-gap) 열과 열 사이의 간격(Line)을 정의
gap(grid-gap) xxx-gap의 단축 속성
grid-auto-rows 암시적인 행(Track)의 크기를 정의
grid-auto-columns 암시적인 열(Track)의 크기를 정의
grid-auto-flow 자동 배치 알고리즘 방식을 정의
grid grid-template-xxx과 grid-auto-xxx의 단축 속성
align-content 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content 그리드 콘텐츠를 수평(행 축) 정렬
place-content align-content와 justify-content의 단축 속성
align-items 그리드 아이템(Items)들을 수직(열 축) 정렬
justify-items 그리드 아이템들을 수평(행 축) 정렬
place-items align-items와 justify-items의 단축 속성
display
grid Block 특성의 Grid Container를 정의
inline-grid Inline 특성의 Grid Container를 정의
grid-template-rows 명시적 행의 크기 정의
grid-template-columns 명시적 열의 크기 정의
행과 열의 크기를 지정함과 동시에 행과 열의 개수도 지정이 된다.
ex) grid-template-rows: 100px, 200px, ...
grid-template-columns: repeat(3, 1fr);
fr(fraction) : 공간 비율
grid-template-areas
구성된 그리드 각 행렬에 명칭을 부여하여 각 Item에 영역을 배치시킬 수
있다.
마침표를 사용한 행열은 빈 영역으로 정의된다.
ex)
.container {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main . ."
"main . aside"
"footer footer footer";
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
row-gap : 크기 행과 행 사이의 간격
column-gap : 크기 열과 열 사이의 간격
gap : row, column 행, 열 간격
/* 하나의 값으로 통일할 수 있습니다. */
.container {
gap: 10px; /* row-gap: 10px; + column-gap: 10px; */
}
/* 하나의 값만 적용하고자 한다면 다음과 같이 사용할 수 있습니다. */
.container {
gap: 10px 0; /* row-gap */
gap: 0 10px; /* column-gap */
}
grid : grid-template-rows / grid-template-columns
ex) grid: 100px 100px / 200px 150px;
align-content : 그리드 콘텐츠 수직 정렬
그리드 콘텐츠 세로 너비가 컨테이너보다 작아야 함.
start 시작점(위쪽) 정렬
center 수직 가운데 정렬
end 끝점(아래쪽) 정렬
space-around 각 행 위아래에 여백을 고르게 정렬
space-between 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지
여백으로 고르게 정렬
justify-content : 그리드 콘텐츠 수평축 정렬
그리드 콘텐츠 세로 너비가 컨테이너보다 작아야 함.
start 시작점(왼쪽) 정렬
center 수평 가운데 정렬
end 끝점(오른쪽) 정렬
space-around 각 열 좌우에 여백을 고르게 정렬
space-between 첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지
여백으로 고르게 정렬
space-evenly 모든 여백을 고르게 정렬
place-content : <align-content> <justify-content>
align-items : 그리드 콘텐츠 안의 아이템들의 수직 정렬
normal stretch와 같습니다. normal
start 시작점(위쪽) 정렬
center 수직 가운데 정렬
end 끝점(아래쪽) 정렬
stretch 열 축을 채우기 위해 그리드 아이템을 늘림
justify-items
normal stretch와 같습니다. normal
start 시작점(왼쪽) 정렬
center 수평 가운데 정렬
end 끝점(오른쪽) 정렬
stretch 행 축을 채우기 위해 그리드 아이템을 늘림
place-items : align-items justify-itemsItems 속성
grid-row-start, grid-row-end,
grid-column-start, grid-column-end
.container {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(1) {
grid-row-start: 1;
grid-row-end: 3; // or span 2
grid-column-start: 2;
grid-column-end: 4; // or span 2
}
행은 1번에서 3번까지, 열은 2번에서 4번까지 공간 차지
기본값은 span 1 span은 +의 개념
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>;
align-self
단일 그리드 아이템 수직 축 정렬
normal stretch와 같습니다.
start 시작점(위쪽) 정렬
center 수직 가운데 정렬
end 끝점(아래쪽) 정렬
stretch 열 축을 채우기 위해 그리드 아이템을 늘림
justify-self
단일 그리드 아이템 수평축 정렬
normal stretch와 같습니다.
start 시작점(왼쪽) 정렬
center 수평 가운데 정렬
end 끝점(오른쪽) 정렬
stretch 행 축을 채우기 위해 그리드 아이템을 늘림
place-self : <align-self> <justify-self>
order : 그리드 아이템이 자동 배치되는 순서 변경유용한 함수
repeat(횟수, 크기)
ex) grid-template-rows : repeat(4, 1fr)
minmax(최소, 최대)
ex) grid-template-columns : minmax(100px, 1fr) minmax(200px, auto)
auto : 그리드 아이템의 크기에 따라 확장.
fit-content(내용 최대 크기)
그리드 아이템이 포함하는 내용크기에 맞춰 너비가 늘어나지만
내용 최대 크기 이상으로 늘어나지는 않는다.
grid-template-columns: fit-content(300px) fit-content(300px);단위
grid-template-columns: 1fr 2fr 100px 25%;
공간 배분 px -> % -> fr
min-content : 그리드 아이템이 포함하는 내용의 최소 크기
max-content : 그리드 아이템이 포함하는 내용의 최대 크기
grid-template-columns : min-content 1fr;
한글을 사용하는 경우
word-break : keep-all; 하면 정상 작동.
grid-template-columns: repeat(4, minmax(max-content, 1fr));
auto-fill : 아이템을 수용하기 어려울 경우 자동으로 줄 바꿈 처리
auto-fit : auto-fill에서 모든 아이템 수용 후 남는 공간 축소
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));용어
Track : 하나의 행 또는 열
Line : 트랙과 트랙사이 간격
Cell : 아이템이 배치되는 최소 단위 영역
Area : 아이템이 배치되는 영역의 집합
