CSS Grid 레이아웃 마스터

CSS Grid 레이아웃 마스터

CSS Grid는 2차원 레이아웃 시스템으로, 행과 열을 동시에 제어할 수 있어 복잡한 레이아웃을 쉽게 구현할 수 있습니다.

언제 사용하나요?

• 전체 페이지 레이아웃 (헤더, 사이드바, 메인, 푸터)


• 카드형 갤러리, 대시보드


• 행과 열 모두 제어가 필요한 복잡한 레이아웃


• 반응형 그리드 시스템 구현

기본 문법

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;  /* 3열 */
    grid-template-rows: 100px auto 50px;     /* 3행 */
    gap: 20px;  /* 간격 */
}

Grid vs Flexbox

실전 예시 1: 기본 페이지 레이아웃

.page {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 80px 1fr 60px;
    min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

실전 예시 2: 반응형 카드 그리드

/* 자동으로 열 개수 조절 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* auto-fill: 빈 공간에도 트랙 생성 */
/* auto-fit: 아이템에 맞게 트랙 확장 */

실전 예시 3: 대시보드 레이아웃

.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 15px;
}

/* 큰 위젯 - 2x2 영역 차지 */
.widget-large {
    grid-column: span 2;
    grid-row: span 2;
}

/* 와이드 위젯 - 가로 2칸 */
.widget-wide {
    grid-column: span 2;
}

자주 사용하는 속성

/* 컨테이너 속성 */
display: grid;
grid-template-columns: 1fr 2fr 1fr;  /* 열 정의 */
grid-template-rows: 100px auto;       /* 행 정의 */
gap: 10px 20px;                       /* 행간격 열간격 */
justify-items: center;                /* 아이템 가로 정렬 */
align-items: center;                  /* 아이템 세로 정렬 */

/* 아이템 속성 */
grid-column: 1 / 3;     /* 1번부터 3번 라인까지 */
grid-column: span 2;    /* 2칸 차지 */
grid-row: 1 / -1;       /* 처음부터 끝까지 */
justify-self: end;      /* 개별 아이템 가로 정렬 */
align-self: start;      /* 개별 아이템 세로 정렬 */

유용한 함수들

/* repeat(): 반복 */
grid-template-columns: repeat(3, 1fr);  /* 1fr 1fr 1fr */
grid-template-columns: repeat(3, 100px 50px);  /* 100px 50px 100px 50px 100px 50px */

/* minmax(): 최소/최대 크기 */
grid-template-columns: minmax(200px, 1fr);

/* auto-fill / auto-fit */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* fit-content(): 내용에 맞추되 최대값 제한 */
grid-template-columns: fit-content(300px) 1fr;

반응형 그리드

.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* 미디어 쿼리와 함께 */
@media (max-width: 768px) {
    .page {
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr;
    }
}

정렬 속성 정리

/* 컨테이너 레벨 */
justify-content: center;  /* 그리드 전체 가로 정렬 */
align-content: center;    /* 그리드 전체 세로 정렬 */
justify-items: center;    /* 모든 아이템 가로 정렬 */
align-items: center;      /* 모든 아이템 세로 정렬 */
place-items: center;      /* align-items + justify-items */

/* 아이템 레벨 */
justify-self: end;        /* 개별 아이템 가로 */
align-self: start;        /* 개별 아이템 세로 */
place-self: center end;   /* align-self + justify-self */

브라우저 지원

모든 최신 브라우저에서 지원됩니다. IE11은 부분 지원(-ms- 접두사 필요).