grid 개요
- 그리드 레이아웃은 이차원 행,열의 레이아웃 시스템
- culumns, rows로 구성되며, 사이의 공백을 gutters라 부른다.
- 나란히 있는 형제 item 요소들을 정렬하여 넣어준다.
container 내부 속성
display
- display : grid로 내부 요소 정렬 가능
- display : inline-grid로 내부 외부 속성 동시 변경 가능
grid-template-rows / columns
- 행 / 열의 갯수를 지정하는 속성
- ex) grid-template-columns : 100px 100px 100px; -> 3개의 열
- ex) grid-template-rows : 100px 100px 100px; -> 3개의 행
- fr 단위를 사용하여 전체 컨테이너의 크기를 비율로 지정해 줄 수 있다.
- ex) grid-template-rows : repeat(4, 1fr); -> 반복되는 값을 함수 표기법으로 작성 가능
- 내부 item이 없어도 명시적!!으로 지정, 미리 크기 값 계산 후 자리 생성
grid-template-areas
grid-template-areas : "a a a"
"b c c"
"b c c";
- item 각각의 요소에 grid-area : name 속성을 이용하여 이름 값 지정 후 위 코드 처럼 영역 지정 가능
row-gap / culomn-gap
- 각각의 행 / 열 의 간격을 지정해 주는 속성
- 단축 속성 gap : row cul 순서로 한번에 작성 가능
grid-auto-rows / culomns
- grid-template 이후의 넘치는 item들의 행 / 열의 크기를 암시적!!으로 지정해줄 수 있는 속성
grid-auto-flow
- item들이 자리잡는 흐름을 지정해주는 속성, 기본값 row 행부터 채움
- columns -> 열부터 채워나감
- dense 값을 추가로 작성 시 빈 영역에 들어갈 수 있는 item을 먼저 채움
grid ( 단축 속성 )
- row / column로 작성하여 /로 행 열의 값을을 구분하여 작성
- grid : 1fr 2fr / 100px 200px -> 명시 명시
- grid : auto-flow 1fr 2fr / 100px 200px -> 오토 플로우가 row에 적용
justify-content
- 남는 공간이 있어야 사용 가능, 내부 아이템의 정렬 방법 정의
- start 주축 시작점, end 주축 끝, center 중앙
- space-around 좌우 간격 동일하게 분배, space-between 좌우 딱 붙고 사이 공백 분배
align-content
- end 교차축 끝, center 교차축 중앙
- space-around 좌우 간격 동일하게 분배, space-between 좌우 딱 붙고 사이 공백 분배
justify/align-items
- 한 칸 안에서 item 의 정렬을 정의하는 속성
- stretch(기본값) , start, end, center
item 내부 속성
grid-row/column
- grid 시작 선은 1, 선의 값으로 구분한다. ( 개발자 도구 grid 눌러보면 확인 가능 )
- 음수 값은 명시적으로 정의된 행렬에만 한정
- grid-row-start : 1;
- grid-row-end : -1;
- grid-row : 1 / -1; or 1 / span n (현재 영역부터 n 칸)
grid-area
- item의 이름을 지정하는 속성 또는 grid-row/column의 단축 속성
- grid-area : row-start/col-start/row-end/col-end 의 순서로 작성
order
- item의 배치 순서를 지정하는 속성, 기본값 0 마크업 순서대로 흘러감
z-index
- 요소의 쌓인 순서를 지정하는 속성, 따로 지정 안하면 마크업 순서대로 쌓임
grid에 사용되는 단위
fr
- 가로, 세로의 값을 비율로 나눠주는 단위, 절대단위와 함께 사용 시 남은 부분을 나눔
min/max-content
- 키워드로 value로 사용
- min-content -> 콘텐츠의 내용 중 가장 긴 단어의 값을 최소 너비로 더 이상 안줄어듬.
- max-content -> 콘텐츠의 내용을 한 줄로 볼 수 있는 너비로 늘림
auto-fill
- value 값에 사용시 유동적으로 갯수를 조절, 반응형일 때 유용
- ex) grid-template-columns : repeat(auto-fill,minmax(100px,1fr));
auto-fit
- value 값에 사용시 유동적으로 갯수를 조절, 반응형일 때 유용
- ex) grid-template-columns : repeat(auto-fit,minmax(100px,1fr));
- 빈 공간이 생겼을 때 모두 사용
