Grid项目内容溢出容器问题求助

我搭建了一个简单的Grid布局，其中两个Grid项目的内容溢出了自身容器，item 2和item 5出现了错位情况，以下是相关代码：

原CSS代码 #

body{ 
    background-color: #E3E3E3;

}
#six.container{
    display: grid;
    grid-template:
    [row1-start] "header header header" 40px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
    background-color: #FFF3E8;

}

#six .item{
    text-align: center;
    border-radius: 5px;
    border: 1px solid #F78100;
    background-color: #F89426;
    margin: 5px;   
}

原HTML代码 #

<h2>Grid 6</h2>
<div class="container" id="six">
    <div class="item item-1">item 1</div>
    <div class="item item-2">item 2</div>
    <div class="item item-3">item 3</div>
    <div class="item item-4">item 4</div>
    <div class="item item-5">item 5</div>
    <div class="item item-6">item 6</div>
</div>

问题原因 #

1. 你定义了grid-template的行区域（header和footer），但未给任何Grid项目分配对应的grid-area属性，导致所有项目默认挤在第一个网格区域，引发错位。
2. 项目使用margin会额外占用空间，和网格的列宽计算冲突，加剧溢出问题。

修复方案 #

根据你的布局需求，提供两种修复方式：

方式一：使用定义的模板区域

给每个项目分配对应的grid-area，并用gap代替margin设置间距，同时添加溢出处理：

body { 
    background-color: #E3E3E3;
}
#six.container {
    display: grid;
    grid-template:
        [row1-start] "header header header" 40px [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
    background-color: #FFF3E8;
    gap: 5px; /* 用grid gap替代margin，避免布局计算冲突 */
}

#six .item {
    text-align: center;
    border-radius: 5px;
    border: 1px solid #F78100;
    background-color: #F89426;
    overflow: hidden; /* 隐藏溢出内容，也可设为auto显示滚动条 */
}

/* 分配区域：前三个项目在header行，后三个在footer行 */
#six .item-1, #six .item-2, #six .item-3 {
    grid-area: header;
}
#six .item-4, #six .item-5, #six .item-6 {
    grid-area: footer;
}

方式二：直接定义网格行列（更适合两行三列的布局）

如果你的目标是两行各三个项目，可简化grid-template定义，让项目自动填充网格单元格：

body { 
    background-color: #E3E3E3;
}
#six.container {
    display: grid;
    grid-template-rows: 40px 25px; /* 两行，高度分别为40px、25px */
    grid-template-columns: auto 50px auto; /* 三列，宽度分别为auto、50px、auto */
    background-color: #FFF3E8;
    gap: 5px;
}

#six .item {
    text-align: center;
    border-radius: 5px;
    border: 1px solid #F78100;
    background-color: #F89426;
    overflow: hidden;
}

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