[CSS] CSS3의 핵심적 변화 - Grid layout

1. CSS3 Grid의 등장

---

---

  CSS Grid는 2차원의 레이아웃을 제공한다. CSS Grid는 예전부터 핵(Hack)으로 불렸던 다양한 레이아웃 대체 방식들을 해결 하기 위해 만들어진 CSS 모듈이다.

 CSS Grid를 사용하게 되면서 격자 구조의 레이아웃을 쉽게 구현할 수 있게 되었다. 또한 이 레이아웃 안에 배치하는 item들을 좀 더 쉽게 이동시킬 수 있는 자유로움이 생겼다.

---

2. CSS3 Grid의 사용

---

Grid Properties

Grid는 2개의 개념으로 나뉘게 된다. 첫 번째는 Container, 두 번째는 Items이다. 이 두 가지에 적용하는 속성이 구분되어 있다는 것을 잘 알고 있어야 한다. 

Grid Containers properties

속성	의미
display	그리드 컨테이너(Container)를 정의
grid-template-rows	명시적 행(Track)의 크기를 정의
grid-template-columns	명시적 열(Track)의 크기를 정의
grid-template-areas	영역(Area) 이름을 참조해 템플릿 생성
grid-template	grid-template-xxx의 단축 속성
row-gap(grid-row-gap)	행과 행 사이의 간격(Line)을 정의
column-gap(grid-column-gap)	열과 열 사이의 간격(Line)을 정의
gap(grid-gap)	xxx-gap의 단축 속성
grid-auto-rows	암시적인 행(Track)의 크기를 정의
grid-auto-columns	암시적인 열(Track)의 크기를 정의
grid-auto-flow	자동 배치 알고리즘 방식을 정의
grid	grid-template-xxx과 grid-auto-xxx의 단축 속성
align-content	그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content	그리드 콘텐츠를 수평(행 축) 정렬
place-content	align-content와 justify-content의 단축 속성
align-items	그리드 아이템(Items)들을 수직(열 축) 정렬
justify-items	그리드 아이템들을 수평(행 축) 정렬
place-items	align-items와 justify-items의 단축 속성

Grid Item Properties

속성	의미
grid-row-start	그리드 아이템(Item)의 행 시작 위치 지정
grid-row-end	그리드 아이템의 행 끝 위치 지정
grid-row	grid-row-xxx의 단축 속성(행 시작/끝 위치)
grid-column-start	그리드 아이템의 열 시작 위치 지정
grid-column-end	그리드 아이템의 열 끝 위치 지정
grid-column	grid-column-xxx의 단축 속성(열 시작/끝 위치)
grid-area	영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
align-self	단일 그리드 아이템을 수직(열 축) 정렬
justify-self	단일 그리드 아이템을 수평(행 축) 정렬
place-self	align-self와 justify-self의 단축 속성
order	그리드 아이템의 배치 순서를 지정
z-index	그리드 아이템의 쌓이는 순서를 지정