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

그리드 고급 활용

2차원(행과 열) 레이아웃을 구성하는 Grid, 1차원(행 또는 열) 레이아웃을 구성하는 Flexbox를 함께 사용하면, 복잡한 레이아웃을 효율적으로 만들 수 있습니다.

예를 들어 전체 페이지 레이아웃은 Grid로, 그 안의 작은 섹션 레이아웃(예: 메뉴바)은 Flexbox로 구성할 수 있습니다.

CSS
.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.menu {
  display: flex;
  justify-content: space-between;
}

위 코드에서 .container는 Grid를, .menu는 Flexbox를 사용해 각 레이아웃의 장점을 살릴 수 있습니다.


grid-template-areas​

grid-template-areas 속성은 각 행(가로줄)에 대해 따옴표 (" "), (' ')로 구분해 그리드 영역을 정의합니다.

CSS
.container {
  display: grid;
  grid-template-areas:
    'navbar navbar' /* 네비게이션 영역 */
    'sidebar main-content' /* 사이드바와 주요 콘텐츠 영역 */
    'footer footer'; /* 푸터 영역 */
}

위 코드는 navbar, sidebar, main-content, footer라는 4개의 영역을 정의하고, 각각에 맞는 CSS 클래스를 지정해 레이아웃을 구성합니다.

CSS
.navbar {
  /* 메뉴를 나열하는 navigation bar */
  grid-area: navbar;
  background-color: #f2f2f2;
}

.sidebar {
  /* 사이드바 */
  grid-area: sidebar;
  background-color: #add8e6;
}

.main-content {
  /* 주요 콘텐츠 */
  grid-area: main-content;
  background-color: #e6e6e6;
}

.footer {
  /* 푸터 */
  grid-area: footer;
  background-color: #4caf50;
}

미세한 레이아웃 조절​

minmax()는 그리드 아이템의 최소, 최대 크기를 지정합니다.

CSS
.container {
  display: grid; /* Grid 컨테이너 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

위 코드는 .container 내의 열의 최소 크기를 200px로, 최대 크기를 1fr로 설정하면서, 가능한 많은 열을 자동으로 채웁니다.


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

다음 내용이 궁금하다면?

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