강의 15: CSS 그리드 – 쉽게 복잡한 레이아웃 구축

이번 강의에서는 행과 열을 모두 완벽하게 제어할 수 있는 강력한 레이아웃 시스템인 CSS 그리드에 대해 알아봅니다. Flexbox는 1차원 레이아웃(행 또는 열)에 적합하지만 Grid를 사용하면 2차원 레이아웃을 처리할 수 있으므로 전체 웹 페이지 레이아웃을 정밀하게 디자인할 수 있습니다.

1. CSS 그리드란 무엇인가요?

CSS 그리드 레이아웃은 일반적으로 그리드로 알려져 있으며 행과 열을 동시에 관리하도록 설계된 2D 레이아웃 시스템입니다. 각 요소가 그리드 셀에 배치되어 깨끗하고 체계적인 레이아웃이 가능한 행렬이나 스프레드시트로 생각할 수 있습니다.

2. 그리드를 만드는 방법

그리드 사용을 시작하려면 디스플레이: 그리드를 설정하여 컨테이너를 그리드로 정의해야 합니다. 그런 다음, Grid-template-rows 및 Grid-template-columns 속성을 사용하여 행과 열 수를 정의합니다.

예:

    
1
    
2
    
3
    
4

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px; /* space between the grid items */
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    text-align: center;
}

이렇게 하면 각 셀이 100픽셀 x 100픽셀이고 셀 사이에 10픽셀 간격이 있는 2x2 그리드가 생성됩니다.

3. 그리드 영역 정의

grid-area 속성을 사용하여 항목이 차지할 특정 그리드 영역을 정의할 수도 있습니다. 이를 통해 그리드 내에서 항목이 배치될 위치를 정확하게 제어할 수 있습니다.

예:

    
Header
    
Sidebar
    
Main Content
    
Footer

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

이 예에서는 머리글과 바닥글이 두 열에 걸쳐 있고 사이드바와 기본 콘텐츠가 각각의 열을 차지하는 기본 레이아웃을 만듭니다. Grid-template-areas 속성을 사용하면 각 영역의 이름으로 그리드의 구조를 정의할 수 있습니다.

4. 반응형 그리드에 대한 자동 맞춤 및 자동 채우기

CSS Grid의 가장 좋은 점 중 하나는 반응형으로 만드는 것이 얼마나 쉬운가입니다. 자동 맞춤 및 자동 채우기 속성은 사용 가능한 공간에 따라 열 수를 자동으로 조정할 수 있습니다.

예:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

이 예에서 그리드는 컨테이너 내에 들어갈 수 있는 만큼의 열을 자동으로 생성하며, 각 열의 너비는 최소 150px 이상입니다. 추가 공간이 있으면 나머지 영역을 채우기 위해 열이 늘어납니다.

5. 그리드 정렬

justify-items 및 align-items를 사용하여 그리드 내부의 항목을 정렬할 수 있습니다.

• justify-items: 그리드 셀 내에서 항목을 수평으로 정렬합니다.
• align-items: 그리드 셀 내에서 항목을 수직으로 정렬합니다.

예:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.item {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    text-align: center;
}

이렇게 하면 모든 항목이 그리드 셀 내에서 수평 및 수직으로 중앙에 배치됩니다.

6. 중첩 그리드

CSS 그리드는 중첩 그리드도 지원하므로 더 복잡한 레이아웃을 위해 그리드 항목 내부에 그리드를 생성할 수 있습니다.

예:

    

        

            
Nested 1
            
Nested 2
        
    
    
Item 2
    
Item 3

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.nested-item {
    background-color: #FFC107;
    padding: 10px;
    color: black;
}

이 예에서는 그리드 항목 중 하나에 중첩된 그리드가 포함되어 있어 보다 유연하고 상세한 레이아웃이 가능합니다.

7. 그리드 vs. Flexbox: 각각을 언제 사용해야 하는가

• 항목 레이아웃을 한 방향(행 또는 열)으로 관리해야 하는 경우 Flexbox를 사용하세요.
• 복잡하고 다차원적인 레이아웃을 위해 행과 열을 동시에 관리해야 하는 경우 그리드를 사용하세요.

결론

CSS Grid는 최소한의 노력으로 복잡하고 반응이 빠른 레이아웃을 구축할 수 있는 강력한 방법을 제공하는 웹 디자인의 판도를 바꾸는 도구입니다. 블로그 레이아웃, 대시보드, 웹사이트 구조 등 어떤 작업을 하든 Grid를 사용하면 행과 열을 모두 쉽게 제어할 수 있는 유연성을 얻을 수 있습니다.

LinkedIn에서 나를 팔로우하세요

리도이 하산