👑 flex와 grid의 차이점
- flex: 한 방향 레이아웃 시스템
- grid: 두 방향 레이아웃 시스템
👑 grid 기본 구조
- 그리드 컨테이너 (grid contatiner): 전체 공간
- 그리드 아이템 (grid item)
-> 각각의 속성에 따라 아이템들이 컨테이너에 배치되는 것
컨테이너 속성에 'display: grid'를 넣는 것부터 시작한다.
- 그리드 컨테이너 (Grid Container)
display: grid를 적용하는, Grid의 전체 영역. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬. - 그리드 아이템 (Grid Item)
Grid 컨테이너의 자식 요소들. 바로 이 아이템들이 Grid 규칙에 의해 배치. - 그리드 트랙 (Grid Track)
Grid의 행(Row) 또는 열(Column) - 그리드 셀 (Grid Cell)
Grid의 한 칸.같은 실제 html 요소는 그리드 아이템이고, 이런 Grid 아이템 하나가 들어가는 “가상의 칸(틀)” - 그리드 라인(Grid Line)
Grid 셀을 구분하는 선입니다. - 그리드 번호(Grid Number)
Grid 라인의 각 번호입니다. - 그리드 갭(Grid Gap)
Grid 셀 사이의 간격입니다. - 그리드 영역(Grid Area)
Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합.
👑 컨테이너에 적용하는 속성
display: grid;
-> grid가 주변과 어떻게 어우러질 지에 대한 내용
-> inline-grid: inline-block처럼 수행됨
grid-template-rows(행 배치)/ grid-template-colums(열 배치)
: 그리드의 형태 정의
-> 여러 단위 사용 가능/ 섞어서 쓸 수 있음
-> 숫자 비율대로 크기를 나눈다.
repeat 함수
: 반복되는 값 처리
-> 반복되는 값을 자동으로 처리해줌
-> 위의 2개는 같은 동작을 한다.
minmax 함수
: 최솟값과 최댓값 지정
-> 두번째를 실행했을 경우 나타나는 결괏값
-> minmax(100p, auto): 내용이 적더라도 최소 100px, 최대 auto로 늘어나게 되는 것이다.
auto-fill, auto-fit
: 값을 미리 정하지 않고, 너비가 허용하는 한 최대한으로 셀을 채운다.
-> auto-fill: 모자라면, 위와 같이 공간이 남게된다
-> auto-fit: 남는 공간을 채워준다.
row-gap / column-gap
: 셀 사이의 간격 지정
-> gap으로 한 번에 처리도 가능
grid-auto-columns / grid-auto-rows
: 그리드 형태를 자동으로 정의
-> 위의 코드는 row의 수를 아는 경우에, auto는 row의 수를 모를 경우, 유용하다.
👑 아이템에 적용하는 속성
grid-column-start/grid-column-end/grid-column/grid-row-start/grid-row-end/grid-row
: 각 셀의 영역 지정 (col, row의 범위 지정)
-> grid-column과 grid-row는 start, end를 모두 쓸 수 있는 축약형
-> 
몇 개의 셀을 사용할 건지 지정도 가능
->
grid-template-areas
: 각 영역에 이름을 붙이고, 이름을 이용해서 배치하는 방법
-> 차지하는 셀의 개수만큼 써주면 된다. header는 3칸을 차지하므로 3번 써준 것! 빈칸은 마침표 또는 'none'사용
-> 각 영역의 이름은 위와 같이 매치할 수 있다. 이름에 따옴표 없음!!!
grid-auto-flow
-> 기존: 자리없으면 다음 줄로 배치
-> grid-auto-flow: dense로 설정해줌으로서, 빈칸 채워줌
-> 지금까지 열과 행의 처리, 각 아이템들에 대한 처리를 해주었다면 이제 정렬해보자.
👑 정렬
align-items
: 세로 방향 정렬
justify-items
: 가로 방향 정렬
place-items
: align-items와 justify-items를 같이 쓸 수 있는 단축 속성
align-content
: 아이템 그룹 세로 정렬
-> align-items: end (각 줄 단위)
-> align-content: end (전체)
justify-content
: 아이템 그룹 가로 정렬
place-content
: align-content와 justify-content를 같이 쓸 수 있는 단축 속성
align-self/justify-self
: 개별 아이템 세로, 가로 정렬
place-self
: align-self, justify-self을 한 번에 적용할 수 있는 단축 속성
order
: 각 아이템들의 나열 순서
(작은 수 일수록 먼저 배치)
z-index
: z축 설정
(숫자 클수록 위로)
⭕ 나의 언어로 정리
컨테이너와 아이템으로 나눌 수 있다. 컨테이너에 display: grid를 적용하는 것부터 시작한다.
- 컨테이너에 적용하는 속성:
- grid-template-rows/colums: row수 아는 경우/행과 열 배치/ 여러 단위 사용가능 (fr:비율)
- grid-auto-rows/colums: row수 모르는 경우/ 행과 열을 자동으로 배치 해줌
- auto-fill/auto-fit: 너비가 허용하는 한 최대한 셀을 채움/ 남는 공간이 있으면 빈공간 채워줌
- minmax: 최솟값과 최댓값 지정해줌
- repeat: 반복해줌
- gap(row-gap/column-gap): 셀 간의 간격 지정
- grid-template-areas: 각 영역에 이름 지정
- align-items: 한 줄 단위
- justify-items: 한 줄 단위
- align-content: 전체
- justify-content: 전체
- 아이템에 적용하는 속성:
- grid-row/grid-column(start, end): 각 차지하는 정도를 지정해줌
- grid-auto-flow: 빈칸들에 대한 처리(빈칸 남았을 경우)
- 정렬
- place-self
- order:
- z-index
