그리드 고급 활용

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

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

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

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

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

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

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

위 코드는 navbar, sidebar, main-content, footer라는 4개의 영역을 정의하고, 각각에 맞는 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()는 그리드 아이템의 최소, 최대 크기를 지정합니다.

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

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

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