| grid |
gird는 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 컨텐츠간의 관계를 정의하는데 사용합니다. |
| 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-columns은 grid row들의 크기를 자동으로 설정합니다. |
| grid-column |
grid-column은 grid 아이템의 시작, 끝 라인넘버를 지정하여 column의 범위를 지정합니다. |
| grid-column-end |
grid-column-end은 grid 아이템의 끝 라인넘버를 지정하여 column의 범위를 지정합니다. |
| grid-column-gap |
grid-column-gap은 grid 셀 사이의 column 간격을 설정합니다. |
| grid-column-start |
grid-column-start은 grid 아이템의 시작 라인넘버를 지정하여 column의 범위를 지정합니다. |
| grid-gap |
grid-gap은 grid 셀 사이의 row 또는 column간격을 설정합니다. |
| grid-row |
grid-row는 은 grid 아이템의 시작, 끝 라인넘버를 지정하여 row의 범위를 지정합니다. |
| grid-row-end |
grid-row-end는 은 grid 아이템의 끝 라인넘버를 지정하여 row의 범위를 지정합니다. |
| grid-row-gap |
grid-row-gap은 grid 셀 사이의 row 간격을 설정합니다. |
| grid-row-start |
grid-row-start는 은 grid 아이템의 시작 라인넘버를 지정하여 row의 범위를 지정합니다. |
| grid-template |
grid-template는 grid columns, rows, and areas를 한번에 설정합니다. |
| grid-template-areas |
grid-template-areas는 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법입니다. |
| grid-template-columns |
grid-template-columns는 컨테이너에 column 배치된 Grid 트랙의 크기들을 지정해주는 속성입니다. |
| grid-template-rows |
grid-template-rows는 컨테이너에 row 배치된 Grid 트랙의 크기들을 지정해주는 속성입니다. |