Grid 레이아웃

/* 세 열: 첫째 200px, 둘째와 셋째는 남는 공간을 2 대 1로 */
.fixed-and-fluid {
    display: grid;
    grid-template-columns: 200px 2fr 1fr;
}

/* 같은 너비의 네 열 */
.four-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* 150px 이상인 열을 들어가는 만큼 자동으로 만듦 (반응형 그리드에 자주 사용) */
.auto-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.container {
    display: grid;
    /* 3개의 행: 첫 번째 100px, 두 번째 콘텐츠 크기만큼, 세 번째 남은 공간의 1배 */
    grid-template-rows: 100px auto 1fr;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 20px; /* 모든 그리드 셀 사이 20px 간격 */
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 150px); /* 각 열의 너비를 150px로 고정 */
    justify-items: center; /* 각 셀 내부의 아이템들을 가로 중앙 정렬 */
}

.container {
    display: grid;
    grid-template-rows: repeat(2, 100px); /* 각 행의 높이를 100px로 고정 */
    align-items: center; /* 각 셀 내부의 아이템들을 세로 중앙 정렬 */
}

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px; /* 그리드 총 너비: 300px */
    width: 500px; /* 컨테이너 너비: 500px */
    justify-content: center; /* 300px 그리드를 500px 컨테이너의 중앙에 배치 */
}

.container {
    display: grid;
    grid-template-rows: 50px 50px; /* 그리드 총 높이: 100px */
    height: 300px; /* 컨테이너 높이: 300px */
    align-content: center; /* 100px 그리드를 300px 컨테이너의 중앙에 배치 */
}

.item-a {
    grid-column: 1 / 3; /* 첫 번째 세로 라인에서 시작하여 세 번째 세로 라인에서 끝남 (2칸 차지) */
    grid-row: 1 / 2; /* 첫 번째 가로 라인에서 시작하여 두 번째 가로 라인에서 끝남 (1칸 차지) */
}
.item-b {
    grid-column: span 2; /* 두 칸 너비를 차지 */
    grid-row: span 3; /* 세 칸 높이를 차지 */
}

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header" /* 첫 번째 행: 모두 header 영역 */
        "nav    main   aside"  /* 두 번째 행: nav, main, aside */
        "footer footer footer"; /* 세 번째 행: 모두 footer 영역 */
}

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 레이아웃 실습</title>
    <link rel="stylesheet" href="css/grid.css">
</head>
<body>
    <div class="grid-container">
        <header class="header">
            <h1>내 Grid 웹사이트</h1>
            <p>CSS Grid로 만드는 멋진 레이아웃</p>
        </header>

        <nav class="navbar">
            <ul>
                <li><a href="#">홈</a></li>
                <li><a href="#">제품</a></li>
                <li><a href="#">소개</a></li>
                <li><a href="#">문의</a></li>
            </ul>
        </nav>

        <main class="main-content">
            <h2>환영합니다!</h2>
            <p>이곳은 CSS Grid Layout을 이용해 만들어진 반응형 웹 페이지입니다. Grid는 2차원 레이아웃에 특화되어 복잡한 웹 페이지 구조를 효율적으로 설계할 수 있게 해줍니다.</p>
            <div class="image-gallery">
                <div class="gallery-item">사진 1</div>
                <div class="gallery-item">사진 2</div>
                <div class="gallery-item">사진 3</div>
                <div class="gallery-item">사진 4</div>
            </div>
            <h3>Grid의 장점</h3>
            <ul>
                <li>복잡한 2차원 레이아웃 설계 용이</li>
                <li>아이템들의 위치와 크기 정교하게 제어</li>
                <li>반응형 디자인에 유리</li>
            </ul>
        </main>

        <aside class="sidebar">
            <h3>관련 정보</h3>
            <p>Grid Layout은 Flexbox와 함께 현대 웹 개발의 필수 기술입니다.</p>
            <button type="button">자세히 보기</button>
        </aside>

        <footer class="footer">
            <p>&copy; 2026 Grid Layout 학습. 모든 권리 보유.</p>
        </footer>
    </div>
</body>
</html>

/* 기본 스타일 및 박스 사이징 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
}

/* Grid 컨테이너 설정 */
.grid-container {
    display: grid; /* Grid 활성화 */
    gap: 20px; /* 그리드 셀 사이의 간격 */
    min-height: 100vh; /* 최소 높이를 뷰포트 높이로 설정 */
    max-width: 1200px; /* 최대 너비 제한 */
    margin: 0 auto; /* 중앙 정렬 */

    /* 그리드 영역 이름 정의 및 배치 */
    grid-template-areas:
        "header  header  header"
        "navbar  main    sidebar"
        "footer  footer  footer";

    /* 각 열의 너비 정의 */
    grid-template-columns: 200px 1fr 250px; /* nav 200px, main 가변, sidebar 250px */
    /* 각 행의 높이 정의 */
    grid-template-rows: auto 1fr auto; /* header, footer는 콘텐츠만큼, 가운데 행은 남은 공간 모두 */
}

/* 그리드 아이템 기본 스타일 */
.grid-container > * {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Grid 아이템을 정의된 영역에 배치 */
.header {
    grid-area: header;
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 30px;
}

.header h1 {
    font-size: 2.8em;
    margin-bottom: 10px;
}

.navbar {
    grid-area: navbar;
    background-color: #34495e;
    color: white;
}
.navbar ul {
    list-style: none;
    padding: 0;
}
.navbar li {
    margin-bottom: 10px;
}
.navbar a {
    display: block; /* 링크 영역 확장 */
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.navbar a:hover {
    background-color: #4a6581;
}

.main-content {
    grid-area: main;
}
.main-content h2 {
    color: #2980b9;
    margin-bottom: 15px;
    border-bottom: 2px solid #2980b9;
    padding-bottom: 5px;
}
.main-content h3 {
    color: #4a6581;
    margin-top: 25px;
    margin-bottom: 10px;
}
.main-content ul {
    list-style-type: disc;
    margin-left: 20px;
}
.main-content li {
    margin-bottom: 5px;
}

/* 이미지 갤러리 (그리드 안의 그리드) */
.image-gallery {
    display: grid; /* 갤러리 내부를 다시 그리드로 */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 최소 180px, 가변 열 */
    gap: 15px;
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
}
.gallery-item {
    display: grid;
    place-items: center; /* 글자를 상자 가운데에 */
    height: 120px;
    background-color: #dfe6e9; /* 사진 자리를 나타내는 회색 상자 */
    border-radius: 5px;
    color: #4a6581;
}

.sidebar {
    grid-area: sidebar;
    background-color: #ecf0f1;
}
.sidebar h3 {
    color: #2c3e50;
    margin-bottom: 15px;
}
.sidebar button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}
.sidebar button:hover {
    background-color: #218838;
}

.footer {
    grid-area: footer;
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
}

/* 반응형 디자인: 화면 너비 768px 이하 */
@media (max-width: 768px) {
    .grid-container {
        /* 모바일에서는 모든 영역을 하나의 열에 세로로 쌓음 */
        grid-template-areas:
            "header"
            "navbar"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr; /* 하나의 열만 사용 */
        grid-template-rows: auto auto 1fr auto auto; /* 각 영역 높이 조정 */
        gap: 15px; /* 간격도 조금 줄임 */
    }

    .header, .navbar, .main-content, .sidebar, .footer {
        padding: 15px; /* 패딩도 줄임 */
    }

    .navbar ul {
        display: flex; /* 내비게이션 메뉴를 Flexbox로 가로 정렬 */
        flex-wrap: wrap; /* 공간 부족 시 줄바꿈 */
        justify-content: center;
        gap: 10px;
    }
    .navbar li {
        margin-bottom: 0;
    }
    .navbar a {
        padding: 8px 12px;
        font-size: 0.9em;
    }

    .image-gallery {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 모바일 갤러리 조정 */
        gap: 10px;
    }
}