[기초]CSS 그리드(Grid)

CSS Grid 레이아웃은 웹 페이지의 복잡한 2차원 레이아웃을 간편하게 구성할 수 있는 강력한 레이아웃 시스템입니다. 그리드는 행(row)과 열(column)을 사용하여 컨테이너 안에 아이템을 배치합니다. CSS Grid는 주로 레이아웃의 큰 틀을 잡는 데 사용되며, CSS Flexbox와 함께 사용하면 더욱 유연한 디자인을 만들 수 있습니다.

 

기본 구성 요소

1. 그리드 컨테이너(Grid Container): 그리드 레이아웃이 적용되는 부모 요소입니다.
2. 그리드 아이템(Grid Items): 그리드 컨테이너 내의 자식 요소들입니다.

 

그리드 컨테이너 속성

1. display: 그리드 컨테이너를 정의합니다.

• 값: grid | inline-grid

.container {
  display: grid;
}

 

 

2. grid-template-columns와 grid-template-rows: 그리드 컨테이너의 열과 행을 정의합니다.

.container {
  grid-template-columns: 100px 200px 1fr;
  grid-template-rows: 50px 100px;
}

 

 

3. grid-template-areas: 그리드 레이아웃을 이름 기반으로 정의합니다.

.container {
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

 

 

4. grid-template: grid-template-rows, grid-template-columns, grid-template-areas의 단축 속성입니다.

.container {
  grid-template: 
    "header header header" 50px
    "sidebar main main" 100px
    "footer footer footer" 50px
    / 100px 1fr 1fr;
}

 

 

5. gap: 그리드 셀 간의 간격을 설정합니다.

.container {
  gap: 10px;
}

 

 

6. grid-auto-rows와 grid-auto-columns: 자동으로 생성되는 행과 열의 크기를 설정합니다.

.container {
  grid-auto-rows: 50px;
  grid-auto-columns: 100px;
}

 

 

7. grid-auto-flow: 자동 배치 알고리즘의 동작 방식을 설정합니다.

• 값: row | column | dense | row dense | column dense

.container {
  grid-auto-flow: row dense; /* 기본적으로 행 방향으로, 빈 자리는 촘촘히 채움 */
}

 

---

그리드 아이템 속성

1. grid-column-start, grid-column-end, grid-row-start, grid-row-end: 아이템의 시작 위치와 종료 위치를 지정합니다.

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

 

 

2. grid-column과 grid-row: grid-column-start와 grid-column-end, grid-row-start와 grid-row-end의 단축 속성입니다.

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

 

 

3. grid-area: grid-row-start, grid-column-start, grid-row-end, grid-column-end를 한 번에 지정하거나 grid-template-areas와 연동합니다.

.item {
  grid-area: header;
}

 

 

4. justify-self: 그리드 셀 내에서 아이템을 수평 정렬합니다.

• 값: start | end | center | stretch

.item {
  justify-self: center;
}

 

 

5. align-self: 그리드 셀 내에서 아이템을 수직 정렬합니다.

• 값: start | end | center | stretch

.item {
  align-self: center;
}

 

 

6. place-self: justify-self와 align-self의 단축 속성입니다. 

.item {
  place-self: center center;
}

place-self: center;는 justify-self: center; align-self: center;와 동일합니다.