본문으로 건너뛰기
실습하기

그리드(Grid)로 복잡한 레이아웃 구성하기

Grid 레이아웃으로 웹 페이지를 체스판처럼 여러 칸으로 나눌 수 있게 되었습니다.

하지만 실제 웹사이트를 보면 어떤 칸은 크기가 크고, 어떤 칸은 크기가 작은 경우가 많습니다. 모든 칸이 균일하게 정렬되어 있지 않습니다.

이처럼 복잡한 레이아웃을 구성하기 위해서는 추가적인 Grid 기능들을 활용해야 합니다.


grid-gap, grid-auto-rows, grid-auto-columns​

  • grid-gap: 칸과 칸 사이의 간격을 정의합니다.
CSS
.container {
  grid-gap: 10px; /* 칸 사이의 간격을 10px로 설정 */
}

  • grid-auto-rows, grid-auto-columns: 정의되지 않은 행이나 열의 크기를 지정합니다.
CSS
.container {
  grid-auto-rows: 100px; /* 행의 크기를 100px로 설정 */
  grid-auto-columns: 200px; /* 열의 크기를 200px로 설정 */
}

fr 단위​

fr 단위는 CSS Grid Layout에서 사용되는 길이 단위로, Grid Container 내에서 사용 가능한 공간을 분할합니다.

fr은 fraction의 약자로, 그리드 트랙에 할당된 공간의 비율을 나타냅니다.

예를 들어, CSS 그리드 레이아웃에서 컬럼이나 로우에 fr 단위를 사용할 수 있습니다:

.container {
  display: grid; /* 그리드 컨테이너를 생성 */
  grid-template-columns: 1fr 2fr 1fr; /* 3개의 열 생성, 가운데 열은 양쪽 열보다 2배 더 넓음 */
}

이 예제에서, 그리드 컨테이너는 3개의 컬럼으로 구성되며, 가운데 컬럼은 양쪽 컬럼보다 2배 더 넓습니다.

1fr은 사용 가능한 공간의 한 부분을 나타내고, 2fr은 사용 가능한 공간의 두 부분을 나타냅니다.

따라서, 전체 공간은 4개의 부분으로 나뉘며, 가운데 컬럼은 전체 공간의 절반을 차지합니다.


Grid 위치 조정​

  • justify-items: 가로 축 아이템 정렬

  • align-items: 세로 축 아이템 정렬

  • place-items: 위의 두 속성을 한 번에 결정

CSS
.container {
  justify-items: center; /* 가로 축 아이템을 중앙으로 정렬 */
  align-items: start; /* 세로 축 아이템을 위쪽으로 정렬 */
}

/* or */

.container {
  place-items: start center; /* 세로 축 아이템을 위쪽으로, 가로 축 아이템을 중앙으로 정렬 */
}

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!