grid 자식 위치 조절
- grid의 부모에서 자식 속성의 위치를 조정하는 것들에 대해 알아보자.
키워드
- justify-content : 부모에 선언하며, 상위 박스 또는 바디 기준으로 자식을 가로 정려을 다양하게 하는데 사용
- align-content : 부모에 선언하며, 상위 박스 또는 바디 기준으로 자식을 세로 위치 정려을 다양하게 하는데 사용
- place-content : 위에 두 프러퍼티를 묶어서 사용. (place-content: justify-content의 값 align-content 값 순으로 선언)
https://waraliyo.tistory.com/106에 들어가면 felx에서 사용하는 프로퍼티와 동일한 기능을 가짐
(justify-content 동일, align-content == align-items, place-content == flex-direction)
'CSS' 카테고리의 다른 글
| CSS 2-3 grid (template, justify-items, align-items, place-items) (1) | 2022.12.15 |
|---|---|
| CSS 2-2 grid (gap, column-start, column-end, row-start, row-end) (0) | 2022.12.14 |
| CSS 02-1 grid (template-columns, template-rows, template-columns) (0) | 2022.12.13 |
| CSS 01-3 flex (order, flex-basis) (0) | 2022.12.02 |
| CSS 01-2 felx (felx-wrap, align-content, flex-shrink, flex-grow) (0) | 2022.11.23 |