그리드(격자) 를 이용한 레이아웃이며 colum과 row를 동시에 제어하고 배치할 수 있다.
그리드 레이아웃은 1차원적인 플렉스 레이아웃의 한계를 극복한 새로운 레이아웃 매커니즘이다. 거의 표현하지 못할 레이아웃이 없는 강력함을 가지고 있다. 그러나 그 만큼 설정에 복잡성을 가지고 있다는 것도 잊지 않아야 한다. 관련 속성들이 많고 이해해야할 개념들도 많다. 그럼에도 그리드 레이아웃을 완벽하게 이해했다면 레이아웃 처리에 대한 기술적인 고민은 더이상 필요하지 않다.
그리드 레이아웃은 다차원적이다. 참고로 플렉스 레이아웃은 기본적으로 플렉스 레이아웃 항목들이 플렉스 컨테이너 내에서 메인 축(main axis)에 배열되는 1차원적인 방식이다. 물론 flex-wrap
속성 값을 wrap
으로 지정하면 플렉스 레이아웃 항목들을 정해진 크기의 플렉스 컨테이너의 메인 축(main asix) 내에 수용이 어려울 경우 나머지 플렉스 레이아웃 항목들을 교차축(cross axis) 방향으로 내리고 역시 메인 축 방향으로 배치한다. 하지만 이때 배치되는 플렉스 레이아웃 항목들은 앞서 이미 배치된 내리지 않은 플렉스 레이아웃 항목과는 무관하게 마치 새로운 메인 축을 가진 것 처럼 플렉스 컨테이너 공간 내에 배치된다. 반면에 그리드 레이아웃은 똑같은 상황이라도 하더라도 추가된 새로운 row는 첫번째 row의 colum 흐름에 영향을 받는다.
다음의 실제 결과를 비교해 보면 이해할 수 있다. 플렉스, 그리드 컨테이너 모두 가로 크기와 정렬은 같지만 각각의 레이아웃 항목이 배치되는 모습은 다르다. 이것이 플렉스 레이아웃과 차별점을 갖는 매우 중요한 포인트이다.
명칭 | 설명 |
---|---|
grid container | 그리드 레이아웃 항목을 감싸는 영역(display 속성값을 grid로 설정할 대상) |
grid item | 그리드 레이아웃 대상 |
grid line | 그리드 레이아웃 항목의 위치를 구분하는 가로, 세로 가상의 구획선 |
gap | 그리드 레이아웃 항목간의 간격 |
grid columm | 그리드 레이아웃 항목들이 배치되는 column 축 |
grid row | 그리드 레이아웃 항목들이 배치되는 row 축 |
grid track | 그리드 레이아웃 항목들이 배치되는 column, row 축에서 차지하는 가상의 영역 |
grid-column-start
와 grid-column-end
속성에 대한 속기 속성이다.grid-row-start
와 grid-row-end
속성에 대한 속기 속성이다.grid-template-rows
, grid-template-columns
, grid-template-areas
속성을 한번에 정의하는 속기 속성이다.