grid
template-columns => 세로로 몇 개로 나눌지
template-rows => 가로로 몇 개로 나눌지
grid-column-start => 그리드 칼럼을 시작할 때
grid-column-end => 그리드 칼럼을 끝낼 때
grid-column => 그리드 칼럼 둘다 사용
grid는 flex와 다르게 부모요소에 grid 준다 하더라도 변경되지 않는다.
inline-grid란?
inline-block과 비슷하다
아이템 컨텐트 너비만큼 너비를 가진다.
grid-template-columns
grid-template-columns: auto auto auto
세로 줄이 생기는 느낌이다.
auto auto auto 하면 3 등분으로 나뉜다.
이때 auto는 자동으로 너비를 맞추는 것이고
px로 하면 고정 너비를 맞추는 것이다.
만약 flex-grow처럼 비율로 크기를 조절할 수 있다.
이때 fr 단위를 쓴다.
grid-template-columns: 1fr 3fr 1fr
배너 공간 고정은 200px로 하고 컨텐츠를 1fr로 둔다.
그러면 자동으로 브라우저 크기에 맞게 줄어든다.
grid-template-rows
첫번째 row는 200px
두번째 row는 100px
세번째는 가상 row가 생성이 되고 300px이 된다.
그래서 먼저 grid-template-cols로 몇개의 row인지 확인하자
마찬가지로 비율로 할 때 fr 단위를 쓴다.
grid-column-gap
grid-row-gap
grid-gap
간격을 설정한다.
grid gap은 row, col 순이다.
justify-items
각 셀을 기준으로 한다.
자식 요소가 하나일 때, 각 컬럼당 정렬을 한다.
align-items
각자의 컬럼 내에서 정렬
stretch는 가득찬다.
justify-content란
컨테이너에서 기준으로 정렬하는 것을 의미합니다.
자식
justify-self
align-self
자식 개별로 위치 설정
stretch는 각 cell에서 가득 차게 한다.
그리드 좌표
파란색 4, 4
검은색 2, 3
초록색 4, 2
grid 좌표 기준으로 병합 느낌이다.
그리드 span 방법
grid area
z-index 쓰려면 position 속성 써야한다.
grid-row 속성으로 Row 순서 변경
grid-row 는 grid-row-start와 같다.
order
6과 5의 order가 차이가 있으므로 순서가 변경이 된다.
이 때 HMTL은 변경되지 않는다.
