[CSS Grid] 그리드 정렬

그리드 정렬

그리드 컨테이너는 justify-items, align-items / justify-content, align-content 로 정렬

 

items 와 content 의 차이점

items 는 그리드에서 각각의 cell 을 의미. content 는 그리드 전체를 의미.

 

justify 와 align 의 차이점

justify 는 수평을 의미, align 은 수직을 의미. (flex 에서는 flex-direction 에 따라 수평 수직이 달라지며 이때 justify, align 방향에 주의해야 함.)

 

item의 정렬

그리드 컨테이너 안의 item의 정렬은 justify-items, align-items 로 하며 stretch 가 기본값, start, center, end 사용.

justify-items 와 align-items 를 줄여서 place-items 로 사용가능. 이때 y x 방향 주의할 것.

 

content 의 정렬

그리드 전체를 의미하는 content 는 justify-content, align-content 로 정렬함. 둘을 합쳐서 place-content: y x; 로 사용가능.

 

---

자식 요소의 정렬

justify-self, align-self

justify-self, align-self 는 자식요소에 사용하는 프로퍼티.

place-self 로 합쳐서 사용 가능.