See the Pen grid by sangmok-ye (@sangmok-ye) on CodePen.
일반적인 gird-column : 1/2 의 경우 1번에서 2번까지 영역을 차지하는 거라면
gird-column : span 2 는 현재 위치한 영역에서 2칸을 차지한다는 의미
See the Pen gird-align by sangmok-ye (@sangmok-ye) on CodePen.
items의 경우 n등분으로 나눈 영역에서 start / center / end로 정렬됨
content는 gird 전체 영역에서 정렬
justify-items, justify-content도 동일
align은 세로 정렬, justify는 가로 정렬
* items끼리 place-items로 작성 가능
* align-self, justify-self도 있음. 각 개별 아이템 별로 적용됨.
'css' 카테고리의 다른 글
| [css]모바일 vh 종류 아이폰 갤럭시 (0) | 2023.10.13 |
|---|---|
| [css]실제로 써봤던 scss ㄴㅊㄴㄴ (0) | 2023.07.31 |
| [css]스크롤 체이닝 막기 overscroll-behavior: contain; (0) | 2023.07.24 |
| [css]object-fit : contain 시 세로 정렬 방법 object-position (0) | 2023.03.27 |
| [css]box-reflect 거울에 비친듯한 효과 (0) | 2023.03.17 |