그리드 레이아웃: 그리드 레이아웃을 활용하여 요소를 배치

그리드 컨테이너 설정

1. Grid Container 선언:
   • display: grid 또는 display: inline-grid: 요소를 그리드 컨테이너로 선언합니다. grid는 블록 레벨, inline-grid는 인라인 레벨 그리드를 생성합니다.
2. Grid Template Columns:
   • grid-template-columns: 그리드의 열의 크기를 정의합니다. 단위(px, %, fr 등)를 사용하여 각 열의 크기를 지정할 수 있습니다.
3. Grid Template Rows:
   • grid-template-rows: 그리드의 행의 크기를 정의합니다. 마찬가지로 각 행의 크기를 단위로 지정합니다.
4. Grid Template Areas:
   • grid-template-areas: 그리드 영역을 이름으로 정의하고, 이를 사용하여 레이아웃을 구성할 수 있습니다.
5. Grid Column Gap:
   • column-gap: 열 사이의 간격을 설정합니다.
6. Grid Row Gap:
   • row-gap: 행 사이의 간격을 설정합니다.
7. Grid Gap:
   • gap: row-gap과 column-gap을 한 줄로 결합한 속성입니다. 예: gap: 10px 20px;
8. Grid Auto Flow:
   • grid-auto-flow: 자동 배치 알고리즘의 방향을 정의합니다. row, column, dense 등의 값을 사용할 수 있습니다.

그리드 아이템 설정

1. Grid Column Start/End:
   • grid-column-start, grid-column-end: 그리드 아이템이 시작되고 끝나는 열의 위치를 지정합니다.
2. Grid Row Start/End:
   • grid-row-start, grid-row-end: 그리드 아이템이 시작되고 끝나는 행의 위치를 지정합니다.
3. Grid Area:
   • grid-area: grid-row-start, grid-column-start, grid-row-end, grid-column-end를 한 줄로 결합한 속성입니다.
4. Justify Self:
   • justify-self: 개별 그리드 아이템을 가로축(열)에 대해 정렬합니다.
5. Align Self:
   • align-self: 개별 그리드 아이템을 세로축(행)에 대해 정렬합니다.