grid

CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.

 

테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다.

속성	설명
grid	콘텐츠의 성질을 grid로 정의합니다.
grid-area	grid-row-start, grid-column-start, grid-row-end 및 grid-column-end 값을 한번에 설정하는 약식 재산입니다.
grid-auto-columns	암시적으로 생성된 그리드 열 트랙 또는 트랙 패턴의 크기를 지정 합니다
grid-auto-flow	그리드에 명시적으로 배치(레이아웃) 되지 않은 아이템이 있을 경우, 자동 배치 알고리즘이 실행되어 자동으로 배치 되도록 설정할 수 있습니다.
grid-auto-rows	암시적으로 생성된 그리드 행 트랙 또는 트랙 패턴의 크기를 지정 합니다 .
grid-column	그리드 배치에 선, 범위 또는 자동을 통해 그리드 항목의 크기와 위치 를 지정하고 그리드 영역 의 인라인 시작 및 인라인 끝 가장자리를 지정합니다 .
grid-column-end	그리드 배치에 선, 범위 또는 자동으로써 그리드 열 내에서 그리드 항목의 끝 위치를 지정하여 그리드 영역 의 블록 끝 가장자리를 지정합니다 .
grid-column-gap	요소의 열 사이 의 간격 크기를 설정합니다.
grid-column-start	그리드 배치에 선, 범위 또는 자동으로 그리드 열 내에서 그리드 항목의 시작 위치를 지정합니다.
grid-gap	행과 열 사이의 간격을 설정 합니다.
grid-row	그리드 배치에 선, 범위 또는 아무것도 제공하지 않음(자동)으로 그리드 항목의 크기와 위치를 지정하고 그리드 영역 의 인라인 시작 및 인라인 끝 가장자리를 지정합니다 .
grid-row-end	그리드 배치에 선, 범위 또는 아무 것도 제공하지 않음(자동)으로써 그리드 행 내에서 그리드 항목의 끝 위치를 지정하여 그리드 영역 의 인라인 끝 가장자리를 지정합니다 .
grid-row-gap	요소의 그리드 행 사이 의 간격 크기를 설정합니다.
grid-row-start	그리드 배치에 선, 범위 또는 아무것도 제공하지 않음(자동)으로 그리드 열 내에서 그리드 항목의 시작 위치를 지정합니다.
grid-template	그리드 열 , 행 및 영역 을 정의하기 위한 약식 속성 입니다 .
grid-template-areas	명명된 격자 영역 을 지정하고 격자에 셀을 설정하고 이름을 할당합니다.
grid-template-columns	행 이름을 정의하고 그리드 열의 크기 조정 기능을 추적합니다 .
grid-template-rows	행 이름을 정의하고 그리드 행의 크기 조정 기능을 추적합니다 .