如何修复header与main div间的间距？求Gridbox优质学习指南

一、Header与Main间距过大的解决方案 #

你的问题根源在于header内部的h2标签自带默认margin，同时Grid容器的gap设置也会贡献一部分间距，再加上h2的margin会和外部元素产生折叠，导致你看到的间距远大于预期。以下是具体修复步骤：

修复方案1：清除h2的默认margin #

在CSS中给header内的h2添加样式，直接消除自带的上下外边距：

.header h2 {
    margin: 0;
}

修复方案2：让header包含内部元素的margin #

给header添加overflow: hidden属性，阻止内部元素的margin溢出到容器外：

.header {
    grid-column: 2;
    border: 1px solid black; 
    height: 20vh;
    overflow: hidden; /* 添加此行 */
}

可选：调整Grid容器的gap值 #

如果觉得网格项之间的基础间距还是偏大，可以修改container的gap参数，减小纵向间距：

.container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto; 
    gap: 5px 10px; /* 第一个值为纵向间距，第二个为横向 */
}

修改后的完整CSS示例：

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a{
    text-decoration: none;
    color: black;
}

a:hover {
    color: orange;
    transition: 0.3s;
}

.container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto; 
    gap: 5px 10px;
}


.sidebar {
    grid-column: 1;
    height: 100vh;
    border: solid black;
}

.header {
    grid-column: 2;
    border: 1px solid black; 
    height: 20vh;
    overflow: hidden;
}

.header h2 {
    margin: 0;
}

.main {
    grid-column: 2;
    grid-row: 2; 
    margin-top: 0; 
    border: solid black;
}


.navbar {
    list-style: none;

}

.projects {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 200px));
    grid-template-rows: auto;
    gap: 5px;
}

.project-item {
    border-radius: 10px;
    text-align: center;
    width: auto;
}

.project-item:hover {
    background-color: gray;
    color: white;
    transition: 0.3s;
}

二、优质Grid布局学习指南 #

• MDN CSS Grid布局文档：官方权威资料，覆盖所有Grid属性，搭配交互式示例，适合系统梳理基础概念。
• Grid by Example：由CSS Grid专家Rachel Andrew编写，包含大量实战案例，从基础布局到复杂响应式场景都有详细演示。
• CSS-Tricks CSS Grid完全指南：结构清晰的入门教程，用简洁语言解释核心概念，搭配直观示意图，新手易上手。

内容的提问来源于stack exchange，提问作者alessi.gg