그리드 고급 활용
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));
}