[웹 디자인] 14일차: 그리드 레이아웃(Grid Layout)

그리드 레이아웃(Grid Layout)이란?

CSS 그리드 레이아웃은 2차원 레이아웃 시스템으로, 행과 열을 사용하여 웹 페이지의 요소들을 배치합니다. 그리드 레이아웃은 복잡한 레이아웃을 더 쉽게 구현할 수 있게 해주며, 유연하고 강력한 레이아웃 제어 기능을 제공합니다.

그리드 컨테이너 설정

• display: grid: 요소를 그리드 컨테이너로 설정합니다.
• display: inline-grid: 인라인 그리드 컨테이너로 설정합니다.

예제:

.container {
  display: grid;
}

<div class="container">
  <div class="item">아이템 1</div>
  <div class="item">아이템 2</div>
  <div class="item">아이템 3</div>
</div>

그리드 컨테이너 속성

grid-template-columns와 grid-template-rows

그리드의 열과 행의 크기를 설정합니다.

예제:

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 열 크기 설정 */
  grid-template-rows: 100px 200px; /* 행 크기 설정 */
}

반복 패턴 사용

repeat() 함수로 열과 행의 크기를 반복 설정할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3개의 동일한 열 */
  grid-template-rows: repeat(2, 100px); /* 2개의 동일한 행 */
}

gap

그리드 아이템 간의 간격을 설정합니다.

예제:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* 행과 열 간격 설정 */
}

행과 열 간격 따로 설정

row-gap과 column-gap을 사용하여 각각 설정할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 10px; /* 행 간격 설정 */
  column-gap: 20px; /* 열 간격 설정 */
}

grid-auto-flow

자동 배치된 아이템의 배치 방식을 설정합니다.

• row: 행 방향으로 자동 배치 (기본값)
• column: 열 방향으로 자동 배치
• dense: 빈 공간을 채우기 위해 아이템을 압축하여 배치

예제:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row; /* 또는 column, dense */
}

그리드 아이템 속성

grid-column과 grid-row

그리드 아이템의 시작과 끝 위치를 설정합니다.

예제:

.item1 {
  grid-column: 1 / 3; /* 1열에서 시작하여 3열까지 차지 */
  grid-row: 1 / 2; /* 1행에서 시작하여 2행까지 차지 */
}

.item2 {
  grid-column: 2 / 4; /* 2열에서 시작하여 4열까지 차지 */
  grid-row: 2 / 4; /* 2행에서 시작하여 4행까지 차지 */
}

단축 속성 사용

grid-area 속성으로 줄여서 사용할 수 있습니다.

.item1 {
  grid-area: 1 / 1 / 2 / 3; /* grid-row-start / grid-column-start / grid-row-end / grid-column-end */
}

grid-column-start와 grid-column-end

그리드 아이템의 시작과 끝 열 위치를 설정합니다.

예제:

.item1 {
  grid-column-start: 1; /* 1열에서 시작 */
  grid-column-end: 3; /* 3열까지 차지 */
}

grid-row-start와 grid-row-end

그리드 아이템의 시작과 끝 행 위치를 설정합니다.

예제:

.item1 {
  grid-row-start: 1; /* 1행에서 시작 */
  grid-row-end: 3; /* 3행까지 차지 */
}

justify-self와 align-self

그리드 아이템을 각각의 셀 내에서 정렬합니다.

• justify-self: 셀 내에서 수평 정렬 (start, end, center, stretch)
• align-self: 셀 내에서 수직 정렬 (start, end, center, stretch)

예제:

.item {
  justify-self: center; /* 수평 중앙 정렬 */
  align-self: end; /* 수직 끝 정렬 */
}

justify-items와 align-items

그리드 컨테이너 내의 모든 아이템을 정렬합니다.

• justify-items: 셀 내에서 수평 정렬 (start, end, center, stretch)
• align-items: 셀 내에서 수직 정렬 (start, end, center, stretch)

예제:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center; /* 수평 중앙 정렬 */
  align-items: end; /* 수직 끝 정렬 */
}

grid-template-areas

그리드 레이아웃을 이름을 사용하여 정의합니다. 그리드 아이템에 이름을 지정하고 그 이름을 사용하여 레이아웃을 설정할 수 있습니다.

예제:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

<div class="container">
  <div class="header">헤더</div>
  <div class="sidebar">사이드바</div>
  <div class="content">콘텐츠</div>
  <div class="footer">푸터</div>
</div>

결론

CSS 그리드 레이아웃은 2차원 레이아웃 시스템으로, 행과 열을 사용하여 웹 페이지의 요소들을 유연하게 배치할 수 있습니다. 이번 글에서는 그리드 컨테이너와 그리드 아이템의 다양한 속성과 사용법에 대해 배웠습니다. 그리드 레이아웃을 활용하면 복잡한 레이아웃을 간단하게 구현할 수 있습니다.

다음 글에서는 반응형 디자인 소개에 대해 알아보겠습니다.

다음 글에서 만나요!