Properties

Properties

  • account_tree
  • bug_report

Grid Layout

그리드(격자) 를 이용한 레이아웃이며 colum과 row를 동시에 제어하고 배치할 수 있다.

소개

그리드 레이아웃은 1차원적인 플렉스 레이아웃의 한계를 극복한 새로운 레이아웃 매커니즘이다. 거의 표현하지 못할 레이아웃이 없는 강력함을 가지고 있다. 그러나 그 만큼 설정에 복잡성을 가지고 있다는 것도 잊지 않아야 한다. 관련 속성들이 많고 이해해야할 개념들도 많다. 그럼에도 그리드 레이아웃을 완벽하게 이해했다면 레이아웃 처리에 대한 기술적인 고민은 더이상 필요하지 않다.

그리드 레이아웃은 다차원적이다. 참고로 플렉스 레이아웃은 기본적으로 플렉스 레이아웃 항목들이 플렉스 컨테이너 내에서 메인 축(main axis)에 배열되는 1차원적인 방식이다. 물론 flex-wrap 속성 값을 wrap으로 지정하면 플렉스 레이아웃 항목들을 정해진 크기의 플렉스 컨테이너의 메인 축(main asix) 내에 수용이 어려울 경우 나머지 플렉스 레이아웃 항목들을 교차축(cross axis) 방향으로 내리고 역시 메인 축 방향으로 배치한다. 하지만 이때 배치되는 플렉스 레이아웃 항목들은 앞서 이미 배치된 내리지 않은 플렉스 레이아웃 항목과는 무관하게 마치 새로운 메인 축을 가진 것 처럼 플렉스 컨테이너 공간 내에 배치된다. 반면에 그리드 레이아웃은 똑같은 상황이라도 하더라도 추가된 새로운 row는 첫번째 row의 colum 흐름에 영향을 받는다. 

다음의 실제 결과를 비교해 보면 이해할 수 있다. 플렉스, 그리드 컨테이너 모두 가로 크기와 정렬은 같지만 각각의 레이아웃 항목이 배치되는 모습은 다르다. 이것이 플렉스 레이아웃과 차별점을 갖는 매우 중요한 포인트이다.

Grid Layout Box Model과 용어

명칭설명
grid container그리드 레이아웃 항목을 감싸는 영역(display 속성값을 grid로 설정할 대상)
grid item그리드 레이아웃 대상
grid line그리드 레이아웃 항목의 위치를 구분하는 가로, 세로 가상의 구획선
gap그리드 레이아웃 항목간의 간격
grid columm그리드 레이아웃 항목들이 배치되는 column 축
grid row그리드 레이아웃 항목들이 배치되는 row 축
grid track그리드 레이아웃 항목들이 배치되는 column, row 축에서 차지하는 가상의 영역

관련 속성

  • grid

    그리드 레이아웃을 생성하는 세부 속성들을 한번에 작성하는 속기 속성이다.
  • grid-area

    그리드 레이아웃에서 각각의 레이아웃 항목의 위치 지정에 관련된 세부 속성을 한번에 작성하는 속기 속성이다.
  • grid-auto-columns

    그리드 레이아웃 컨테이너의 컬럼(column) 크기를 암시적으로 설정하여 명시적으로 크기가 설정되지 않은 컬럼(column)에 사용된다.
  • grid-auto-flow

    자동 배치된 그리드 항목들이 그리드 레이아웃에 삽입되는 방법을 제어한다.
  • grid-auto-rows

    그리드 레이아웃 컨테이너의 행(row) 크기를 암시적으로 설정하여 명시적으로 크기가 설정되지 않은 행(row)에 사용된다.
  • grid-column

    그리드 컨테이너 내에서 그리드 항목의 위치를 지정하는 grid-column-startgrid-column-end 속성에 대한 속기 속성이다.
  • grid-column-end

    그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
  • grid-column-start

    그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
  • grid-row

    그리드 컨테이너 내에서 그리드 항목의 위치를 지정하는 grid-row-startgrid-row-end 속성에 대한 속기 속성이다.
  • grid-row-end

    그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
  • grid-row-start

    그리드 항목이 시작될 행(row)의 위치를 정의한다.
  • grid-template

    grid-template-rows, grid-template-columns, grid-template-areas 속성을 한번에 정의하는 속기 속성이다.
  • grid-template-areas

    모든 그리드 항목에 대한 전체적인 그리드 레이아웃 구조를 쉽게 시각화시키는 방법을 제공한다.
  • grid-template-columns

    그리드 레이아웃에서 열(colum)의 수와 너비를 명시적으로 지정한다.
  • grid-template-rows

    그리드 레이이웃에서 행(row)의 수와 높이를 명시적으로 지정한다.

W3C Modules

CSS Grid Layout Module Level 1
W3C Candidate Recommendation Draft, 18 December 2020
CSS Grid Layout Module Level 2
W3C Candidate Recommendation Draft, 18 December 2020