display: grid; CSS 속성은 CSS Grid 레이아웃을 생성하기 위해 사용됩니다. CSS Grid는 웹 페이지의 레이아웃을 효과적으로 구성하기 위한 강력한 도구로, 그리드 내에서 요소들을 배치하고 정렬하는 데 사용됩니다.
display: grid; 속성을 부모 요소에 적용하면 해당 요소는 Grid Container(그리드 컨테이너)로 정의되며, 그 안에 포함된 자식 요소들은 Grid Items(그리드 아이템)로 정의됩니다.
주요 속성 및 개념:
1. Grid Template Columns / Rows (그리드 템플릿 컬럼 및 로우):
grid-template-columns및grid-template-rows속성을 사용하여 그리드 컨테이너 내에서 컬럼과 로우를 정의합니다. 각 항목의 크기 및 배치를 지정할 수 있습니다.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
/* 3개의 열을 생성하고 각각의 너비를 1:2:1의 비율로 설정*/
grid-template-rows: repeat(3, 100px);
/* 3개의 행을 생성하고 각각의 높이를 100px로 설정 */
gap: 10px;
/* 그리드 아이템 간의 간격을 설정 */
}2. Grid Gap (그리드 간격):
- grid-gap 속성을 사용하여 그리드 아이템 간의 간격을 설정합니다.
row-gap과column-gap으로 각각 수직과 수평 간격을 개별적으로 설정할 수도 있습니다.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 20px;
/* 행 간의 간격을 20px로 설정 */
grid-column-gap: 10px;
/* 열 간의 간격을 10px로 설정 */
}3.Grid Column / Row (그리드 컬럼 및 로우):
grid-column및grid-row속성을 사용하여 그리드 아이템의 위치를 지정합니다. 시작과 끝 위치를 정의하여 요소를 위치시킬 수 있습니다.
.item1 {
grid-column: 1 / 3;
/* 1열에서 3열까지, 즉 1부터 2번째 열까지 차지 */
grid-row: 1 / 2;
/* 1행에서 2행까지, 즉 1부터 1번째 행까지 차지 */
}4. Grid Template Areas (그리드 템플릿 영역):
grid-template-areas속성을 사용하여 그리드 아이템을 지정된 그리드 영역에 배치합니다. 이것은 레이아웃을 보다 직관적으로 표현할 수 있도록 도와줍니다.
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}5. Grid Auto Columns / Rows (자동 그리드 컬럼 및 로우):
grid-auto-columns와grid-auto-rows속성을 사용하여 그리드 컨테이너에 추가되는 그리드 아이템의 크기를 지정합니다.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
/* 명시적으로 정의된 열 */
grid-template-rows: 100px 200px;
/* 명시적으로 정의된 행 */
grid-auto-columns: 50px;
/* 동적 열의 크기를 50px로 설정 */
grid-auto-rows: 150px;
/* 동적 행의 크기를 150px로 설정 */
}6. Grid Auto Flow (자동 그리드 플로우):
grid-auto-flow속성을 사용하여 그리드 아이템이 자동으로 배치되는 방향을 설정합니다.row,column,dense등의 값으로 설정할 수 있습니다.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 3개의 열을 생성 */
grid-template-rows: repeat(3, 100px);
/* 3개의 행을 생성 */
grid-auto-flow: row;
/* 그리드 아이템을 수평으로 한 행씩 배치 */
}7. Justify Items / Align Items (아이템 정렬):
justify-items와align-items속성을 사용하여 그리드 아이템을 그리드 셀 내에서 수평 및 수직으로 정렬합니다.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
/* 3개의 열을 생성 */
grid-template-rows: repeat(3, 100px);
/* 3개의 행을 생성 */
justify-items: center;
/* 그리드 아이템을 가로 중앙에 정렬 */
align-items: center;
/* 그리드 아이템을 세로 중앙에 정렬 */
}8. Justify Content / Align Content (컨텐츠 정렬):
justify-content와align-content속성을 사용하여 그리드 컨테이너 내의 그리드 아이템을 수평 및 수직으로 정렬합니다.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
/* 3개의 열을 생성 */
grid-template-rows: repeat(3, 100px);
/* 3개의 행을 생성 */
justify-content: center;
/* 그리드 영역을 가로 중앙에 정렬 */
align-content: center;
/* 그리드 영역을 세로 중앙에 정렬 */
}CSS Grid를 사용하면 웹 페이지의 복잡한 레이아웃을 효과적으로 구성할 수 있으며, 그리드 내에서 요소들을 배치하고 정렬하는 데 매우 강력한 기능을 제공합니다. Grid의 유연한 속성을 활용하면 다양한 디자인을 구현할 수 있습니다.
