5. 그리드 레이아웃의 기본 속성
|
속성 |
설명 |
|
display |
속성의 값을 grid, inline-grid로 지정하면 그리드 레이아웃을 만들 수 있습니다. |
|
grid-template-rows, grid-template-columns |
그리드 레이아웃의 행과 열을 지정합니다. |
|
row-gap, column-gap |
그리드 셀과 셀 사이의 간격을 지정합니다. |
6. 그리드 레이아웃의 정렬 속성
|
속성 |
설명 |
|
align-items |
그리드 아이템 전체를 셀의 세로 방향으로 정렬합니다. |
|
align-self |
각각의 그리드 아이템을 셀의 세로 방향으로 정렬합니다. |
|
justify-items |
그리드 아이템 전체를 셀의 가로 방향으로 정렬합니다. |
|
justify-self |
각각의 그리드 아이템을 셀의 가로 방향으로 정렬합니다. |
|
place-item |
align-items와 justify-items 속성을 한 번에 사용할 수 있는 단축 속성입니다. |
|
place-self |
align-self와 justify-self 속성을 한 번에 사용할 수 있는 단축 속성입니다. |