이번 포스팅은 grid와 grid item 배치 방법에 대해서 포스팅하고자 한다.
grid item과 grid 배치법을 나누어서 설명하고자 한다.
grid-item 배치법
grid-item 배치에는 아래 요소를 사용할 수 있다.
주의할 점은 그리드 박스보다 해당 아이템이 작아야 배치가 적용된다는 것이다.
item : 자식인 grid-item가 아닌 부모인 grid에 작성하며, 모든 grid-item에 해당 배치가 적용된다.
- align-item : 세로 방향에서의 아이템 배치
- justify-item : 가로 방향에서의 아이템 배치
- place-item : align-item과 justify-item의 단축 속성
- place-item : <align-item> <justify-item>
self : 특정한 자식 grid-item에 배치를 적용시키고 싶을 때 사용한다. 해당 자식 grid-item에 작성한다.
- align-self : 세로 방향에서의 아이템 배치
- justify-self : 가로 방향에서의 아이템 배치
- place-self : align-self과 justify-self의 단축 속성
- place-self : <align-self> <justify-self>
grid 배치법
grid 배치에는 아래 요소를 사용할 수 있다.
주의할 점은 화면에 빈 공간이 있어야 그리드를 배치할 수 있다는 것이다.
(화면 전체에 그리드가 꽉 차있으면 배치가 적용되지 않는다.)
- align-content : 세로 방향에서의 그리드 배치
- justify-content : 가로 방향에서의 그리드 배치
- place-content : align-content과 justify-content의 단축 속성
- place-content : <align-content> <justify-content>
사용 예시
See the Pen grid 배치 by 김다영 (@xnpzlttb-the-solid) on CodePen.
(CSS) grid 4탄 : grid-auto-rows, grid-auto-columns, grid-auto-flow 사용법, 동적 그리드 만들기
grid를 만들 때, 초기에 설정한 그리드 아이템 외에 추가로 아이템들을 동적으로 추가하고 싶을 수 있다. 이때 grid-auto-rows와 grid-auto-columns, grid-auto-flow를 사용하면 사전에 그리드 아이템으로 지
lemu-devblog.tistory.com
