[CSS 핵심강좌] 6. Grid

CSS Grid는 웹 페이지의 레이아웃을 구성하기 위한 2차원 격자 시스템입니다. Grid를 사용하면 열과 행을 쉽게 조절할 수 있으며, 복잡한 레이아웃을 효율적으로 구현할 수 있습니다. 이 강좌에서는 Grid의 기본 개념과 사용 방법에 대해 알아보겠습니다.

 

Grid 컨테이너

Grid를 사용하려면 먼저 Grid 컨테이너를 설정해야 합니다. Grid 컨테이너는 display: grid 속성을 적용한 요소입니다. Grid 컨테이너 내부의 직계 자식 요소들을 Grid 아이템이라고 합니다.

.container {
  display: grid;
}

 

Grid 템플릿

Grid 템플릿을 사용하여 격자의 행과 열의 크기를 설정할 수 있습니다.

 

• grid-template-columns: 열의 크기를 설정합니다.
• grid-template-rows: 행의 크기를 설정합니다.

 

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

 

Grid 간격

Grid 간격을 설정하여 격자 사이의 여백을 조절할 수 있습니다.

 

• grid-column-gap: 열 사이의 간격을 설정합니다.
• grid-row-gap: 행 사이의 간격을 설정합니다.
• grid-gap: 열과 행 사이의 간격을 한 번에 설정합니다. (단축 속성)

 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

 

Grid 아이템 배치

Grid 아이템을 격자에 배치할 때 사용하는 속성은 다음과 같습니다.

 

• grid-column-start, grid-column-end: 아이템의 시작 열과 종료 열을 설정합니다.
• grid-row-start, grid-row-end: 아이템의 시작 행과 종료 행을 설정합니다.
• grid-column, grid-row: 시작 및 종료 열 또는 행을 한 번에 설정합니다. (단축 속성)
• grid-area: 아이템의 위치를 지정합니다.

 

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

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

 

Grid 템플릿 영역

Grid 템플릿 영역을 사용하여 레이아웃의 구조를 보다 명확하게 정의할 수 있습니다. 이를 위해 다음과 같은 속성을 사용할 수 있습니다.

 

• grid-template-areas: Grid 영역을 정의하고 이름을 지정합니다.
• grid-area: 아이템에 이름이 지정된 영역을 할당합니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
  grid-template-areas:
    "header header header"
    "sidebar content content";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

 

Grid 자동 배치

Grid의 자동 배치 기능을 사용하여 아이템을 자동으로 격자에 배치할 수 있습니다.

 

• grid-auto-columns, grid-auto-rows: 자동 배치 시 사용할 열과 행의 크기를 설정합니다.
• grid-auto-flow: 자동 배치 방식을 설정합니다. (row, column, dense 등)

 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
  grid-auto-flow: dense;
}

 

이제 CSS Grid의 기본 개념과 사용 방법을 이해했습니다. 이를 활용하여 다양한 레이아웃을 효율적으로 구현할 수 있습니다. 그러나 모든 브라우저에서 완벽하게 지원되지 않는 경우가 있으므로, 브라우저 호환성을 고려하여 적절한 접두사를 사용하거나 필요한 경우 다른 레이아웃 기법을 사용해야 합니다.

 

[CSS 핵심강좌] 7. 전환과 애니메이션