grid

• container에 display: grid : 수직, 수평 방향을 한번에 지정 가능

• container에 display: inline-grid : 컨테이너가 인라인 요소가 됨

• 컨테이너 크기의 기본 값 : auto (넓이는 최대, 높이는 자식에 맞게)

grid container

• grid-template-rows/columns: <명시적> 넓이 값/높이 값을 띄어쓰기로 구분해서 주면, 해당 값들의 개수 만큼 행/열(가로칸/세로칸)이 생김
• 이 두 값이 컨테이너의 실제 크기보다 작으면 해당 크기만큼만 격자가 생기는 것!
• grid-template로 두 값을 한번에 지정 가능

• grid-auto-rows/ grid-auto-columns: <암시적> 명시적으로 선언한 grid 칸에 들어오지 못한 요소의 행(열) 크기를 지정해서, 암시적으로 grid를 확장한다

• grid-auto-flow : 배치 방향
• 기본 값은 row : row 방향으로 아이템들을 배치(z 모양)
• column: column 방향으로 아이템들을 배치
• dense : 아이템이 정렬될 때 이전에 빈공간이 있다면 메워서 배치됨
• row/column dense로 dense 방향도 지정할 수 있음(기본 값은 row)
• 예시) 전(grid-auto-columns로 인해 빈공간이 생겼음) → 후(위로 올려져 여백을 채움)

• grid-template-areas
• grid-area 속성을 가진 아이템들에 대해서 해당 이름을 가지고, 해당 영역의 공간을 배분
• 한 행은 큰 따옴표 영역, 한 열은 띄어쓰기 전
• “이름1 이름2 이름3” ⇒ 이름 1,2,3이 1행1열씩 총 3열을 차지
• 이름 대신 마침표나 none으로 여백을 줄 수 있다

• grid-gap: 아이템 사이의 여백
• 띄어쓰기로 행 열을 구분, 하나만 적으면 둘 다 같은 값
• grid-row(column)-gap으로 각각 지정 가능
• grid 접두어를 없애고 사용해도 ㄱㅊ ⇒ 하위 호환성 문제가 있음

• justify-content, align-content 등으로 자식 요소의 배치를 설정할 수 있음
• 근데, flex-start → start 식으로 값이 바뀜

• justify-items : 한칸을 컨테이너라고 생각하고, 자식의 주축 배치 방법
• 칸보다 items 요소가 더 작아서, 빈공간이 있을 때 사용할 수 있음
• justify-content와 속성은 같지만, space- 속성은 적용x(한칸에 한 요소만 있으므로)

• align-items: 한칸을 컨테이너라고 생각하고, 자식의 교차축 배치 방법
 

• line
• = 격자
• (column 방향) 첫 칸의 왼쪽인 1line부터 시작해서 마지막 칸의 오른쪽인 nline까지
• (row 방향) 첫 칸의 위쪽인 1line부터 시작해서 마지막 칸의 아래쪽인 nline까지
• 음수로 반대 방향부터 셀 수도 있음(오른쪽/밑쪽부터 -1~)
 

• 개발자 도구의 요소에서 grid conatiner에서 grid 버튼을 누르면 격자가 표시 됨
• 레이아웃에서 div.conatiner 가 선택되어 잇는지 확인

grid items

• grid-row(columns)-start: 아이템이 몇 line에서 시작하는지 지정
• 맨 왼쪽, 맨 윗 라인이 1부터 시작(사진의 tooltips참고)
• 음수를 준다면 반대 방향
• span 숫자 : start, end에서부터 차지하는 line 개수 (기본값은 1) ⇒ 상대적 크기
• start, end 둘 중 하나만 주면 되는듯 ㅇㅇ(개수-시작/끝점 페어로)

• grid-row(columns)-end : 아이템이 몇 line에서 끝나는지 지정 ⇒ 절대적 크기

• grid-row(column) : grid-row(column)-start, -end를 한번에 명시 가능. 값은 start값 / end 값
• 한 원소에만 이 값을 줘서 해당 그리드를 다 채웠다면, 나머지 원소는 암시적으로 밑으로 밀려남
• 밀려난 아이템은 글자 크기만큼 차지한다
• 모든 원소에 이 속성을 주면 쌓이게 됨(마지막 자식일수록 위로 쌓임, z-index로 순서를 지정할 수 있음)
• 값에 span 숫자를 명시하면, 숫자만큼 차지하는 라인이 늘어남 (기본값은 1)

• grid-area
• 시계 반대 방향으로 한번에 명시 가능 (row-start / column-start / row-end / column-end)
• 영역 이름 지정 ㄱㄴ, 지정된 이름은 컨테이너의 grid-template-areas에서 쓰일 수 있음
• 값은 따옴표 없이

• justify-self, align-self
• 컨테이너의 justify-content / align-items 값을 item마다 지정 가능하고, 이 값이 컨테이너 속성보다 우선된다
• 값을 stretch(normal)을 줬을 때, 아이템의 width, height를 안 주거나, auto로 줘야 늘어난다

• order

• width, height를 명시해서 line보다 작게 만들 수도 있다

grid function(함수)

• 함수를 속성의 값으로 지정할 수 있다

• repeat(개수, 값) : 반복되는 값을 한번에 줄 수 있음

• minmax(최소값, 최대값)
• 크기!!! repeat 함수의 값, grid-template 값 등으로 들어갈 수 있음
• 컨테이너가 격자보다 더 크면 최대값을 지정해서 채워줄 수 있다
• 반응형으로 컨테이너가 작아져도 최소값 이하로 줄어들 수 없고, 컨테이너가 더 작아지면 overflow될 수 있다
• grid-auto-rows의 값으로 써서 (,auto)로 준다면, 요소가 암시적 행보다 더 커도 감싸짐

• fit-content(최대값) : 내용만큼 감쌈, 내용 넓이가 최대값을 넘어간다면 줄바꿈이 된다

units(단위)

• px로 명시적으로 지정

• fr(=fraction)나 %로 비율로 지정
• px로 지정한 값이 있다면, 나머지 사용가능한 공간을 fr로 나눔
• ex) minmax(300px, 1fr): grid item의 크기는 최소 300px로 설정, 브라우저의 크기가 커지면 브라우저 크기 / 그리드 아이템 개수로 늘어나게 된다.
ex2) minmax(300px, 1fr 2fr): “ , 브라우저의 크기가 커지면 브라우저 크기 / (그리드 아이템 개수*3) * 1(or 2) ⇒ 확인 필요

• 내용이 overflow됐을 때, 영어이면 단어(띄어쓰기로 구분된)를 단위로, 한글이면 한글자를 단위로
• 아이템에 word-break 속성으로 단위 설정 가능
• 값이 keep-all → 영어처럼 단어 단위로 내용을 구분
• 값이 break-all → 한글처럼 한글자 단위로 내용을 구분

• min-content : 내용의 최소(한 단위의 최대 크기)로 크기 지정

• max-content: 내용의 최대(전체 크기)로 크기 지정

• auto-fit / auto-fill ⇒ 빈공간이 생겼을 때만 차이가 발생
• repeat에서 씀, 행이나 열의 개수를 자동으로 지정 ⇒ 반응형에서 자동으로 달라짐
• -fit : 아이템의 넓이가 최대, 컨테이너에 여백이 있다면 아이템 넓이들이 컨테이너에 맞도록 자동으로 늘려짐 ⇒ minmax()로 지정된 최소를 따름
• -fill : 아이템의 넓이가 최소, 아이템 넓이들을 컨테이너에 맞추지 않아 여백이 생길 수 있음