CSS display: gird

CSS 그리드 레이아웃(Grid Layout) 

페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. 

 

그리드(grid) 속성들!

grid	grid의 속성들을 한번에 일괄적용 할 수 있는 속성입니다.
grid-area	grid-area 속성은 grid item의 크기와 위치를 결정합니다
grid-auto-columns	grid-auto-columns은 grid column들의 크기를 자동으로 설정합니다.
grid-auto-flow	grid-auto-flow는 grid-auto-columns이나 grid-auto-rows같은 속성으로 자동 설정된 크기를 배치하는 방식을 설정합니다.
grid-auto-rows	grid-auto-rows은 grid row들의 크기를 자동으로 설정합니다.
grid-column	grid-column 속성은 컬럼 속성을 설정합니다.
grid-column-end	grid-column-end 속성은 컬럼의 끝나는 위치를 설정합니다.
grid-column-gap	grid-column-gap 속성은 컬럼의 간격 설정합니다.
grid-column-start	grid-column-start 속성은 컬럼의 시작 위치를 설정합니다.
grid-gap	grid-column-gap은 grid 셀 사이의 column 간격을 설정합니다.
grid-row	grid-row는 은 grid 아이템의 시작, 끝 라인넘버를 지정하여 row의 범위를 지정합니다.
grid-row-gap	grid-row-gap은 grid 셀 사이의 row 간격을 설정합니다.
grid-row-start	grid-row-start는 은 grid 아이템의 시작 라인넘버를 지정하여 row의 범위를 지정합니다.
grid-row-end	grid-row-end는 은 grid 아이템의 끝 라인넘버를 지정하여 row의 범위를 지정합니다
grid-template	grid-template 속성은 컬럼의 속성을 설정합니다.
grid-template-areas	grid-template-areas 속성은 가로 컬럼의 영역을 설정합니다.
grid-template-columns	grid-template-columns 속성은 가로 컬럼의 정렬 상태를 설정합니다.
grid-template-rows	grid-template-rows 속성은 세로 컬럼의 정렬 상태를 설정합니다

 

참조사이트입니다. 그리드 예제들고 있으니 참고하세요!

display : flex

반응형 사이트를 만들때 유용한 그리드를 알아보았습니다!