패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"
Grid 속성 연습 게임 : https://cssgridgarden.com/#ko
→ CSS Grid 속성과 값을 이용해서 식물들을 물이 있는 곳으로 옮기는 게임
CSS grid
- 격자를 이용하여 내용의 크기와 위치를 제어하는 방법
- flex는 단일 축을 중심으로 배치되는 반면, grid는 두 개의 축을 이용
- 셀 병합 기능을 제공
- 다른 수단에 비해 짧은 코드로 자유도 높은 배치 구현 가능
grid 속성
grid 👈
트랙의 수와 크기, 컨테이너에 적용
- grid-template
- grid-template-rows (행 트랙의 수량과 크기)
- grid-template-columns (열 트랙의 수량과 크기)
- grid-template-areas (셀 이름 명시)
- grid-auto-flow (흐름 방향과 밀집)
- grid-auto-rows (암시적 행 트랙의 크기)
- grid-auto-columns (암시적 열 트랙의 크기)
grid-area
아이템의 배치와 병합, 아이템에 적용
- grid-row
- grid-row-start (행 시작)
- grid-row-end (행 끝)
- grid-column
- grid-column-start (열 시작)
- grid-column-end (열 끝)
grid 용어
- grid container
- grid item
- grid line
- grid track
- grid cell, grid area
- gap
*참고: https://yamoo9.gitbook.io/css-grid/css-grid-term
- 명시적 그리드
- 트랙의 크기와 수량을 분명하게 선언한 그리드
- grid-template-rows/columns/areas 속성으로 제어
- 암시적 그리드
- 명시적 그리드 외부에 배치되어 grid-auto-flow/rows/columns 속성으로 흐름 방향과 크기를 결정하는 그리드
gap
다중 컬럼, 플렉스, 그리드 아이템 사이의 간격
- 값: <'row-gap'>, <'column-gap'>?
- 초기 값: normal (다중 컬럼에서 1em 그렇지 않으면 0)
- 적용: 컬럼/플렉스/그리드 컨테이너
grid container
역할
- 트랙의 수량과 크기를 명시 (grid-template-*)
- 아이템 배치 방향 결정 (grid-auto-flow)
- 암시적 트랙 크기 결정 (grid-auto-*)
생성
- display 속성의 값으로 'grid' 또는 'inline-grid' 선언
<style>
.container {
display: grid | inline-grid;
}
</style>특징
- 그리드 컨테이너/아이템에 선언하지 않은 모든 grid-* 속성은 초기값으로 설정됨
- grid 속성으로 컨테이너의 트랙(행/열) 수와 크기를 설정하고 grid-area 속성으로 아이템의 배치와 병합을 설정하기 전까지는 그리드 컨테이너를 생성한 것 만으로 특별한 효용이 없음
grid item
역할
- 아이템의 배치와 병합을 결정
(grid-row-start/-column-start/-row-end/-column-end, grid-area) - 아이템의 배치 순서 결정
배치
- 행 배치 시점 / 열 배치 시점 / 행 비치 종점 / 열 배치 종점 값을 선언하여 아이템의 배치 위치를 결정할 수 있음
- 값은 시계 반대 방향으로 순환하고 슬래시(/) 구분자로 분리
<'grid-row-start'> / <'grid-column-start'> / <'grid-row-end'> / <'grid-column-end'>- grid-row-end 값과 grid-column-end 값은 생략 가능
→ 생략한 값은 auto와 같음 (자동으로 결정됨)
<style>
.container {
display: grid;
grid: auto / repeat(3, 1fr);
}
.item1 {
grid-area: 2 / 3;
/* <'grid-row-start'> / <'grid-column-start'> */
/* item이 두번째 row(행)의 세 번째 column에 배치됨 */
}
</style>배치/병합
- span 키워드와 병합할 트랙의 수량을 조합하면 셀 병합 가능
<integer> / span && <integer>
<style>
.container {
display: grid;
grid: auto / repeat(3, 1fr);
}
.item1 {
grid-area: 2 / 2 / span 3 / span 2;
/* <integer> / span && <integer> */
/*
두번째 행에, 두번째 컬럼에서 item 배치 시작
row 방향으로 세 개의 트랙 병합
column 방향으로 두 개의 트랙 병합
*/
}
</style>정렬(트랙)
- 트랙의 크기가 auto인 상태로 컨테이너를 가득 채우지 않는다면 'place-content' 속성을 사용하여 트랙의 위치를 정렬할 수 있음
- 실무에서는 잘 사용하지 않음 👎
<style>
.container {
display: grid;
grid: auto / repeat(3, auto);
place-content: end center;
/* <content-position> = center | start | end */
}
</style>정렬(아이템 복수)
- 셀(복수)의 위치를 정렬할 수 있음
- grid 트랙을 'container'에 가득 채운 후 그 안에서 아이템들의 정렬 방법 결정 가능
- 실무에서는 잘 사용하지 않음 👎
<style>
.container {
display: grid;
grid: auto / repeat(3, 1fr);
place-items: end center;
/* <self-position> = center | start | end */
}
</style>정렬(아이템 단수)
- 셀(복수)의 위치를 정렬할 수 있음
- 'grid-area' 영역 안에서 아이템을 단 하나만 독립적으로 방향을 제어할 수 있음
- 실무에서는 잘 사용하지 않음 👎
<style>
.container {
display: grid;
grid: auto / repeat(3, 1fr);
}
.item1 {
place-self: end center;
/* <self-position> = center | start | end */
}
</style>grid track
- display 속성에 grid 값을 선언한 것 만으로는 특별한 효용이 없으므로 item track을 만들어야 함
생성(균등)
- 마침표와 공백 구분자로 익명의 셀을 생성
- 크기는 내용에 따라 자동으로 설정됨
- 트랙의 크기를 제어하지 않기 때문에 실무에서 유용하지 않은 패턴 👎
<style>
.container {
display: grid;
grid: '. . .'; /* 그리드 컨테이너와 3열의 익명 트랙 단축 문법 */
}
</style>생성(제어)
- 2열 2행 트랙 단축 문법
grid: <'grid-template-rows'> / <'grid-template-columns'>- 트랙의 크기와 수량을 명시적으로 제어
- 명시적으로 선언하지 않는 나머지 트랙은 자동으로 설정됨
- 실무 사용 확률 99% 👍
<style>
.container {
display: grid;
grid: 80px 1fr / 120px 1fr;
/* fr은 fraction '부분'을 의미 */
}
</style>생성(반복)
- auto 값으로 트랙의 크기를 임의 지정 가능
repeat(<integer[1, ∞]>, <track-list>)- repeat() 함수로 크기 값을 반복할 수 있음
- 트랙의 크기가 한정된(정해져 있는) 경우 repeat 함수 사용 가능
- repeat 함수의 첫 번째 인자는 트랙의 수량(반복할 횟수), 두 번째 인자는 트랙의 크기(반복할 내용)
<style>
.container {
display: grid;
grid: auto / 40px 1fr 2fr 1fr 2fr;
==
grid: auto / 40px repeat(2, 1fr 2fr);
/* repeat(<integer[1, ∞]>, <track-list>) */
}
</style>생성(방향)
-
배치 방향 설정
-
auto-flow 값
- gird 단축 속성에서만 사용하는 값의 형태
- grid-auto-flow 속성 값의 다른 표기법
- 집어 넣는 위치에 따라 그 부분의 방향이 결정됨
- columns 값 위치에 적용할 경우 columns 방향으로 트랙이 진행됨
- rows 값 위치에 적용할 경우 rows 방향으로 트랙이 진행됨
-
슬래시(/)와 함께 교차 축 grid-template-rows/columns 값의 명시가 필수
<'grid-template-rows'> / [auto-flow && dense?] <'grid-template-columns'>?
<'grid-template-rows'> / [auto-flow && dense?] <'grid-template-columns'>?
<style>
.container {
display: grid;
/* item 높이가 1:2의 비율로 컬럼 방향(세로)으로 배치 */
grid: 1fr 2fr / auto-flow;
/* <'grid-template-rows'> / [auto-flow && dense?] <'grid-template-columns'>? */
/* item이 행의 방향(가로)으로 배치되고 item 너비는 1:2의 비율 */
grid: auto-flow / 1fr 2fr;
/* [auto-flow && dense?] <'grid-auto-rows'>? / <'grid-template-columns'> */
}
</style>grid 속성 값
dense
- 'dense'는 밀집한다는 의미
- 비어 있는 공간을 메우는 개념
- 채우지 못한 빈 영역이 있으면 흐름 방향을 거슬러 올라가 트랙을 채움
- grid 속성의 값으로 항상 'auto-flow' 값과 함께 쓰임
<style>
.container {
grid: auto-flow dense / repeat(3, 1fr);
}
</style>auto-fill/fit(동적 트랙)
repeat( [ auto-fill | auto-fit ], <fixed-size> )- 트랙을 채우지 못한 상황에서 트랙의 최대 크기가 auto이면 auto-fill 또는 auto-fit 방식으로 트랙의 크기와 수량을 자동으로 결정함
→ 어떻게 결정될지 정확히 알기 어렵기 때문에 잘 사용하는 속성은 아님 👎 - auto-fill
- 힘의 방향이 안쪽으로 작용
- item의 너비가 좁아지면서 내용을 채우는 방향으로 작용
- auto-fit
- 힘의 방향이 바깥쪽으로 작용
- item의 너비를 잡아 늘리는 방향으로 작용
'grid auto-fill/fit' Codepen 예제보기
CSS grid 레이아웃 문법과 예제 참고 사이트
https://naradesign.github.io/css-grid-layout.html
Frontend Developer