CSS Grid/minmax()/fr/Grid function

CSS Grid

• 2차원의 레이아웃 시스템 제공

• Flexible Box도 좋지만 복잡한 레이아웃에서는 Grid가 더 좋음

• 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈

Grid Properties

• Container와 Item이라는 두가지 개념으로 구분 되어있음

display

• Grid Container를 정의

• 정의된 컨테이너의 자식 요소들은 자동으로 Grid Items로 정의 됨

• 그리드를 사용하기 위해 컨테이너에 필수로 작성

• grid: Block 특성의 Grid Container를 정의

• inline-grid: inline 특성의 Grid Container를 정의

grid-template-rows

• 명시적 행의 크기를 정의

• 동시에 라인의 이름도 정의

• fr(fraction, 공간 비율) 단위 사용 가능

• repeat() 함수 사용 가능

• grid-template-rows: 1행크기 2행크기;

• grid-template-rows: [선이름] 1행크기 [선이름] 2행크기;

grid-template-columns

• 명시적 열의 크기 정의

• 라인의 이름도 정의

• fr단위 사용 가능

• repeat() 함수 사용 가능

• grid-template-columns: 1열크기 2열크기;

• grid-template-clolumns: [선이름] 1열크기 [선이름] 2열크기

• grid-row, grid-column

• 행 혹은 열을 확장할 수 있음

• grid-row: 1/ 3; -> 1번선에서 3번선까지 행 확장하기

grid-template-areas

• 지정된 그리드 영역 이름을 참조해 그리드 템플릿을 생성함

• grid-area는 grid item에 적용하는 속성

• grid-remplate-areas:

• "header header header"

• "main main aside"

• "footer footer footer"

• -> 1행에 헤더 3칸, 2행에 메인2칸 어사이드1칸, 3행에 푸터 3칸

row-gap

• 각 행과 행사이의 간격(Gutter)

• 그리드 선의 크기를 지정함

column-gap

• 각 열과 열사이의 간격 설정

• gap: 행과행사이 열과열사이;

grid-auto-rows

• 암시적 행의 크기를 정의

grid-auto-columns

• 암시적 열의 크기 정의

grid-auto-flow

• 배치하지 않은 아이템을 어떤 방식의 자동 배치 알고리즘으로 처리할지 정의

• 배치한 아이템은 grid-area를 사용한 아이템 의미

• row: 각 행축을 따라 차례로 배치

• column: 각 열 축을 따라 차례로 배치

• rowdense(dense): 각 행 축을 따라 차례로 배치, 빈 영역 메움

• column dense: 각 열 축을 따라 차례로 배치, 빈 영역 메움

grid-template-rows, grid-template-columns

• 명시적 행, 열의 크기 정의

• 동시에 라인의 이름도 정의

• fr단위 사용 가능

• repeat()함수 사용 가능

grid-row

• grid-row-start와 grid-row-end의 단축 속성

• 각 속성을 /로 구분함

• grid-row: <grid-row-start> / <grid-row-end>

• span 숫자: span이 end위치에 있을때는 숫자만큼 확장을 하고, span이 start위치에 있을 때는 숫자만큼 뒤로가는 거임

• grid-row: 2/ span3; -> 2~5

• grid-row: span3/4; -> 1~4

grid-area

• grid-area: <grid-row-start>/<grid-column-start>/<grid-row-end>/<grid-column-end>;

• grid-area: 영역이름;

grid-template

• grid-template: <grid-template-rows> / <grid-template-columns>;

• grid-template: <grid-template-areas>;

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

• 그리드 콘텐츠를 수직 정렬함

• 그리드 콘텐츠의 세로너비가 그리드 컨테이너보다 작아야 함

• 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: 행축을 채우기 위해 수평으로 그리드 콘텐츠 늘림

align-items

• 그리드 아이템들을 수직 정렬함

• 그리드 아이템의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야 함

• normal: stretch와 같음

• start: 시작점 정렬

• center: 가운데 정렬

• end: 끝점 정렬

• stretch: 열 축을 채우기 위해 그리드 아이템을 늘림

justify-items

• 그리드 아이템들을 수평 정렬함

• 그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야 함

• normal: stretch와 같음

• start: 시작점 정렬

• center: 가운데 정렬

• end: 끝점 정렬

• stretch: 행 축을 채우기 위해 그리드 아이템을 늘림

align-self

• 단일 그리드 아이템을 수직 정렬

• 그리드 아이템의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야 함

• normal: stretch와 같음

• start: 시작점 정렬

• center: 가운데 정렬

• end: 끝점 정렬

• stretch: 열 축을 채우기 위해 그리드 아이템을 늘림

justify-self

• 그리드 아이템들을 수평 정렬함

• 그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야 함

• normal: stretch와 같음

• start: 시작점 정렬

• center: 가운데 정렬

• end: 끝점 정렬

• stretch: 행 축을 채우기 위해 그리드 아이템을 늘림

order

• 그리드 아이템이 자동 배치되는 순서를 변경함

• 숫자가 작을수록 앞서 배치됨(음수포함)

z-index

• z-index 속성을 이용해 아이템이 쌓이는 순서 변경 가능함

Grid Functions

repeat

• repeat() 함수는 행과 열의 크기 정의를 반복함

• 반복되는 횟수와 행 혹은 열의 크기 정의를 인수로 사용함

• grid-template-rows와 grid-template-columns에서 사용

minmax

• minmax() 함수는 행과 열의 최소 혹은 최대 크기를 정의함

• 첫 번째 인수는 최솟값이고 두 번째 인수는 최댓값

• grid-template-rows, grid-template-columns, grid-auto rows, grid-auto-columns

fit-content

• 행.열의 크기를 그리드 아이템이 포함하는 내용크기에 맞춤

• 내용의 최대 크기를 인수로 사용함

• minmax(auto, max-content)와 유사함

fr

• fr(fractional unit)은 사용 가능한 공간에 대한 비율

min-content

• 그리드 아이템이 포함하는 내용의 최소 크기를 의미

max-content

• 그리드 아이템이 포함하는 내용의 최대 크기를 의미

auto-fill, auto-fit

• 행, 열의 개수를 그리드 컨테이너 및 행/열 크기에 맞게 자동으로 조정함

• repeat()함수와 같이 사용 함(행, 열과 아이템 개수가 명확하지 않거나 명확할 필요가 없을 때)

• auto-fill과 auto-fit은 간단한 차이점을 제외하면 동일하게 동작함

• auto-fill은 빈공간을 비게 둠

• auto-fit은 빈공간을 늘려서 채움