如何减少CSS Grid布局中‘Job Role’与‘Company Name’的间距？

你的问题核心在于**grid-template-rows: repeat(5, 1fr)**：这个设置会把容器高度强制平均分成5份，每份占1fr高度，导致“Job Role”和“Company Name”所在的行被不必要地拉伸，这才是空白过大的根本原因——之前尝试的方法都没触及这个核心，所以无效。

解决方案 #

修改网格行的定义，让行高适配内容，同时移除元素的默认边距，具体步骤如下：

1. 调整网格行模板：放弃固定的5个1fr行，改用自适应内容的行定义：

.experience-child {
    display: grid;
    grid-template-columns: 2fr 6fr;
    /* 行定义：前两行适配内容，第三行占剩余高度 */
    grid-template-rows: auto auto 1fr;
    margin-bottom: 6em;
    font-family: 'Alumni Sans', sans-serif;
    row-gap: 2px; /* 可自定义这个值，控制两行之间的间距 */
}

2. 明确元素网格位置并移除默认边距：p标签自带上下margin会额外增加间距，同时确保元素在预期的网格行内：

.jobrole {
    font-weight: bold;
    grid-area: 1 / 2; /* 放在第1行第2列 */
    margin: 0; /* 移除p标签默认margin */
}

.company {
    grid-area: 2 / 2; /* 放在第2行第2列 */
    font-weight: bold;
    margin: 0; /* 移除p标签默认margin */
}

.job-blurb {
    grid-area: 3 / 2; /* 放在第3行第2列 */
}

为什么之前的方法无效？ #

• row-gap: 0：仅消除行与行之间的间隙，但行本身被强制设为1fr高度，元素上下仍有大量空白
• 负margin/padding：网格单元格高度固定为1fr，元素在单元格内默认占满高度，负边距无法突破单元格的高度限制
• grid-auto-rows: min-content：由于你已设置grid-template-rows，其优先级高于grid-auto-rows，所以这个属性不会生效

完整修改后代码 #

<div class="experience-child">
    <p class="years">2001-2001</p>
    <p class="jobrole">Job Role</p>
    <p class="company">Company Name</p>
    <ul class="job-blurb">
        <li>this</li>
        <li>that</li>
        <li>other</li>
    </ul>
</div>

.experience-child {
    display: grid;
    grid-template-columns: 2fr 6fr;
    grid-template-rows: auto auto 1fr;
    margin-bottom: 6em;
    font-family: 'Alumni Sans', sans-serif;
    row-gap: 2px;
}

.last {
    margin-bottom: 0;
}

.jobrole {
    font-weight: bold;
    grid-area: 1 / 2;
    margin: 0;
}

.company {
    grid-area: 2 / 2;
    font-weight: bold;
    margin: 0;
}

.job-blurb {
    grid-area: 3 / 2;
}

内容的提问来源于stack exchange，提问作者Kamal Sharma