Grid 정렬 (아이템위주)

그리드 아이템 정렬 속성

 

inline 수평 축 정렬(좌우방향)

• justify-items: center; (수평축 가운데, 모눈종이 내부) 
• justify-content: center; (수평축 가운데, 모눈종이 자체)

block 수직축 정렬(위아래방향)

• align-items: start; (수직축 가운데, 모눈종이 내부)
• align-content:center;(수직축 가운데, 모눈종이 자체)

패키징정렬은 content

아이템 정렬은 items

항목별 정렬은 self

 

 

justify-items : center;

justify-items : end;

justify-items : stretch;

justify-items: center; (수평축 가운데)

align-items: start; (수직축 위)

justify-items: center; (수평축 가운데)

align-items: center; (수직축 가운데)

---

justify-items: center; (수평축 가운데, 모눈종이 내부) 

justify-content: center; (수평축 가운데, 모눈종이 자체)

align-items: start; (수직축 위, 모눈종이 내부)

모눈종이가 맨위 가운데에 놓여있다.

---

justify-items: center; (수평축 가운데, 모눈종이 내부) 

justify-content: center; (수평축 가운데, 모눈종이 자체)

align-items: start; (수직축 가운데, 모눈종이 내부)

align-content:center;(수직축 가운데, 모눈종이 자체)

---

부모의 여백에 따라서 그리드정렬이 바뀐다.

여백이 얼만큼 있느냐에 따라, 그리드 박스의 크기에 따라 정렬이 결정된다.

---

  grid-template-areas: 

areas에 따라 하나의 영역이 되어 적용된다.