Properties

Properties

Draft
  • account_tree
  • bug_report

Grid Layout

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

Grid Layout은 Flex Layout의 한계를 극복한 새로운 레이아웃 매커니즘이다. 거의 표현하지 못할 레이아웃이 없는 강력함을 가지고 있다.

그러나 그 만큼 설정에 복잡성을 가지고 있다는 것도 잊지 않아야 한다. 관련 속성들이 많고 이해해야할 개념들도 많다. 그럼에도 Grid Layout을 완벽하게 이해한다면 레이아웃 처리에 대한 기술적인 고민은 더이상 필요하지 않다.

관련 속성들

  • grid

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

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

    그리드 컨테이너의 열 크기를 암시적으로 설정하며 크기가 설정되지 않은 열에도 영향을 준다.
  • grid-auto-flow

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

    그리드 컨테이너의 행 크기를 암시적으로 설정하며 크기가 설정되지 않은 열에도 영향을 준다.
  • grid-column

    그리드 컬럼 내에서 그리드 항목의 위치를 지정하는 grid-column-start와 grid-column-end 속성에 대한 축약성 속성이다.
  • grid-column-end

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

    그리드 레이아웃(grid layout)에서 열 사이의 간격을 정의한다.
  • grid-column-start

    항목을 시작할 열의 줄의 위치를 정의한다.
  • grid-gap

    그리드 레이아웃(grid layout)에서 행과 열 사이의 간격을 한번에 정의하는 축약성 속성이다.
  • grid-row

    그리드 행(row) 내에서 그리드 항목의 위치를 지정하는 grid-row-start와 grid-row-end 속성에 대한 축약성 속성이다.
  • grid-row-end

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

    그리드 레이아웃(grid layout)에서 행 사이의 간격을 지정한다.
  • grid-row-start

    항목이 시작될 행의 위치를 정의한다.
  • grid-template

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

    그리드 레이아웃 내의 영역을 지정한다.
  • grid-template-columns

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

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

외부 리소스

CSS Grid 완벽 가이드
그리드 레이아웃에 대해 정리
그리드 레이아웃 샘플
Grid Layout을 이용한 반응형 처리 예제
이번에야말로 CSS Grid를 익혀보자