icon안동민 개발노트

Grid 레이아웃

 CSS Grid는 강력하고 유연한 2차원 레이아웃 시스템으로, 복잡한 웹 레이아웃을 쉽게 구현할 수 있게 해줍니다.

 이 절에서는 Grid의 개념, 주요 속성, 그리고 실제 적용 방법에 대해 알아보겠습니다.

Grid의 개념과 특징

 CSS Grid는 행과 열로 구성된 2차원 레이아웃 시스템입니다.

 Flexbox가 1차원(행 또는 열)으로 요소를 배치하는 데 최적화된 반면, Grid는 행과 열을 동시에 제어할 수 있어 더 복잡한 레이아웃에 적합합니다.

 주요 특징

  • 2차원 레이아웃 구성 가능
  • 행과 열의 크기를 유연하게 조절 가능
  • 요소의 정확한 배치 제어 가능
  • 반응형 디자인에 적합

Grid 컨테이너와 Grid 아이템

  • Grid 컨테이너 : Grid 레이아웃을 적용하는 부모 요소
  • Grid 아이템 : Grid 컨테이너 내부의 직계 자식 요소들
<div class="grid-container">
    <div class="grid-item">아이템 1</div>
    <div class="grid-item">아이템 2</div>
    <div class="grid-item">아이템 3</div>
</div>

Grid 컨테이너 속성

  1. display: grid
  • Grid 레이아웃을 활성화합니다.
.grid-container {
    display: grid;
}
  1. grid-template-columns/grid-template-rows
  • 열과 행의 크기와 개수를 정의합니다.
.grid-container {
    grid-template-columns: 100px 1fr 2fr;
    grid-template-rows: auto 100px auto;
}
  1. grid-gap (또는 column-gap과 row-gap)
  • Grid 아이템 사이의 간격을 설정합니다.
.grid-container {
    grid-gap: 10px;
}
  1. grid-template-areas
  • Grid 영역의 이름을 지정하여 레이아웃을 정의합니다.
.grid-container {
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

Grid 아이템 속성

  1. grid-column/grid-row
  • Grid 아이템의 열과 행 위치를 지정합니다.
.grid-item {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}
  1. grid-area
  • Grid 아이템이 차지할 영역을 이름으로 지정합니다.
.header {
    grid-area: header;
}

유연한 Grid 레이아웃

 1. fr 단위

  • 사용 가능한 공간의 비율을 나타냅니다.
.grid-container {
    grid-template-columns: 1fr 2fr 1fr;
}

 2. repeat() 함수

  • 반복되는 값을 간단히 표현합니다.
.grid-container {
    grid-template-columns: repeat(3, 1fr);
}

 3. minmax() 함수

  • 최소값과 최대값을 지정합니다.
.grid-container {
    grid-template-columns: minmax(100px, 1fr) 3fr;
}

반응형 Grid 디자인

 Grid는 본질적으로 반응형 디자인에 적합합니다.

 미디어 쿼리와 결합하여 다양한 화면 크기에 대응할 수 있습니다.

.grid-container {
    grid-template-columns: repeat(4, 1fr);
}
 
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
 
@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

브라우저 호환성

 대부분의 최신 브라우저는 Grid를 지원하지만, 일부 오래된 브라우저에서는 문제가 발생할 수 있습니다.

 필요한 경우 폴리필이나 대체 레이아웃을 제공하는 것이 좋습니다.

Grid 레이아웃 패턴 예시

  1. 갤러리 레이아웃
<div class="gallery">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
    <img src="image5.jpg" alt="Image 5">
    <img src="image6.jpg" alt="Image 6">
</div>
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 16px;
}
 
.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
  1. 대시보드 레이아웃
<div class="dashboard">
    <header>헤더</header>
    <nav>내비게이션</nav>
    <main>메인 콘텐츠</main>
    <div class="widget">위젯 1</div>
    <div class="widget">위젯 2</div>
    <footer>푸터</footer>
</div>
.dashboard {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main widget-1"
        "nav main widget-2"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr 1fr auto;
    height: 100vh;
}
 
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
.widget:nth-child(4) { grid-area: widget-1; }
.widget:nth-child(5) { grid-area: widget-2; }
footer { grid-area: footer; }
  1. 매거진 스타일 레이아웃
<div class="magazine">
    <header>매거진 제목</header>
    <article class="main-article">메인 기사</article>
    <article class="side-article">사이드 기사 1</article>
    <article class="side-article">사이드 기사 2</article>
    <aside>광고</aside>
    <footer>푸터</footer>
</div>
.magazine {
    display: grid;
    grid-template-areas:
        "header header header"
        "main main side1"
        "main main side2"
        "ad ad ad"
        "footer footer footer";
    grid-template-columns: 1fr 1fr 300px;
    grid-gap: 16px;
}
 
header { grid-area: header; }
.main-article { grid-area: main; }
.side-article:nth-of-type(1) { grid-area: side1; }
.side-article:nth-of-type(2) { grid-area: side2; }
aside { grid-area: ad; }
footer { grid-area: footer; }

 CSS Grid는 웹 레이아웃 디자인에 혁명적인 변화를 가져왔습니다. 복잡한 2차원 레이아웃을 직관적이고 효율적으로 구현할 수 있게 해주며, 반응형 디자인에도 매우 적합합니다. Grid의 강력한 기능을 활용하면 이전에는 구현하기 어려웠던 레이아웃도 쉽게 만들 수 있습니다.

 Grid를 효과적으로 사용하기 위해서는 실제 프로젝트에 적용해보며 경험을 쌓는 것이 중요합니다. 또한, Flexbox와 함께 사용하면 더욱 강력한 레이아웃 시스템을 구축할 수 있습니다. Grid는 전체적인 페이지 레이아웃에, Flexbox는 컴포넌트 내부 레이아웃에 사용하는 등 각 기술의 장점을 살려 조합할 수 있습니다.

 마지막으로, Grid를 사용할 때는 항상 접근성과 성능을 고려해야 합니다. 복잡한 레이아웃을 구현할 때도 시맨틱한 HTML 구조를 유지하고, 불필요하게 복잡한 Grid 정의를 피하는 것이 좋습니다. 이를 통해 유지보수가 용이하고 성능이 뛰어난 레이아웃을 구현할 수 있습니다.

이전으로다음으로