Grid - grid container properties & grid item properties

자 잠시 중간타임으로 그리드 컨테이너의 프로퍼티를 알아보자 외우진 않더라도 뭐가 있는지만 체크해보자

 

1. display - 그리디 컨테이너를 정의한다.

2. grid-template-rows - 명시적 행(Track)의 크기를 지정

3. grid-template-columns - 명시적 열(Track)의 크기를 지정

4. grid-template-areas - 영역이름을 참조해 템플릿을 만든다

5. grid-template - grid-template-XXX의 단축 속성

6. row-gap(grid-row-gap) - 행과 행 사이의 간격을 정의

7. column-gap(grid-column-gap) - 열과 열 사이의 간격을 정의

8. gap(grid-gap) - xxx-gap의 단축 속성

9. grid-auto-rows - 암시적인 행의 크기를 정의

10.grid-auto-columns - 암시적인 열의 크기를 정의

11. grid-auto-flow - 자동 배치 알고리즘 방식을 정의

12. grid - grid-template-xxx와 grid-auto-xxx의 단축 속성

13. align-content - 그리드 컨텐츠를 수직 정렬 (cross-axis)

14. justify-content - 그리드 컨텐츠의 수평 정렬 (main-axis)

15. place-content - align-content 와 justify-content의 단축속성

16. align-items - 그리드 아이템 들을 수직 정렬

17. justify-items - 그리드 아이템들을 수평 정렬

18. place-items - align-items와 justify-items의 단축속성

 

이번엔 그리드 아이템들의 속성을 알아보자

1. grid-row-start : 그리드 아이템의 행 시작 위치 지정

2. grid- row-end: 그리드 아이템의 행 끝 위치 지정

3. grid-row : grid-row-xxx의 단축 속성(행의 시작-끝 위치)

4. grid-column-start : 그리드 아이템 열 시작 위치 지정

5. grid-column-end : 그리드 아이템 열 끝 위치 지정

6. grid-column : grid-column-xxx의 단축 속성

7. grid-area : 영역이름을 설정하거나, grid-row와 grid-column의 단축 속성

8. align-self : 단일 그리드 아이템을 수직 정렬

9. justify-self: 단일 그리드 아이템을 수평 정렬

10. place-self : align-self와 justify-self의 단축 속성

11. order : 그리드 아이템의 배치 순서를 지정

12. z-index : 그리드 아이템의 쌓이는 순서를 지정.