CSS 그리드 레이아웃 기본 속성

그리드 레이아웃은 HTML에서 표를 만들 때와 같이 행과 열의 개념을 통해 레이아웃을 구성하는 방식입니다. 다음은 그리드 레이아웃의 기본 속성과 사용 예제입니다.

1. display 속성

그리드 레이아웃은 display: grid; 또는 display: inline-grid; 속성으로 시작합니다. 이 속성은 플렉스 박스와 동일한 기본 개념으로 작동합니다.

.grid-container {
  display: grid; /* 또는 inline-grid */
}

2. grid-template-columns와 grid-template-rows 속성

행(grid-template-rows)과 열(grid-template-columns)의 크기를 설정하여 그리드 셀을 생성할 수 있습니다. 각 값은 공백으로 구분하며, 순서대로 1열, 2열 값을 설정합니다.

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
}

자동 및 반복 설정

auto: 그리드 컨테이너에 맞춰 행이나 열의 크기를 자동으로 조정
repeat(): 동일한 크기의 행이나 열을 반복
minmax(): 최소 및 최대 크기 지정

.grid-container {
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: minmax(50px, 100px) 50px;
}

3. row-gap과 column-gap 속성

셀 사이의 간격을 지정하는 속성입니다.

row-gap: 행 사이의 간격
column-gap: 열 사이의 간격

.grid-container {
  row-gap: 10px;
  column-gap: 20px;
}

4. 정렬 속성: align-items, justify-items, align-self, justify-self

• 세로 정렬
  align-items: 모든 그리드 아이템의 세로 방향 정렬
  align-self: 개별 그리드 아이템의 세로 방향 정렬

• 가로 정렬
  justify-items: 모든 그리드 아이템의 가로 방향 정렬
  justify-self: 개별 그리드 아이템의 가로 방향 정렬

  .grid-container {
    align-items: center;
    justify-items: start;
  }

• 단축 속성
  place-items: align-items와 justify-items 속성을 동시에 설정
  place-self: align-self와 justify-self 속성을 동시에 설정

  .grid-container {
    place-items: center end;
  }

5. grid-template-areas와 grid-area 속성

grid-template-areas를 통해 그리드 셀에 이름을 부여하여 레이아웃 배치를 쉽게 할 수 있습니다. 각 영역을 이름으로 지정하고, 그리드 아이템에 grid-area 속성을 통해 배치합니다.

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

이처럼 CSS 그리드 레이아웃은 다양한 속성을 통해 직관적이고 유연하게 웹 레이아웃을 구성할 수 있습니다. 이를 통해 더 간편하고 효율적인 레이아웃 구성이 가능합니다.