Grid单元格重叠求助：subtitle-img与subtitle2类元素重叠原因及解决

问题原因分析 #

• 未定义的自定义网格线名称无效：你在subtitle1、subtitle2、subtitle-img的grid-column-end中使用了col2-end、col2-start、col3-end这些自定义网格线名称，但从未在subtitle-content-grid容器中定义过这些名称。浏览器无法识别，会直接忽略这些规则，导致元素布局位置错乱。
• 网格项位置与跨度冲突：subtitle2设置了grid-row-end: span 2，而subtitle-img从第2行开始并跨度4行（grid-row-end: span 4），但容器仅定义了4行，同时subtitle3未指定网格位置，会自动占用默认单元格，进一步挤压空间造成重叠。
• 无网格间隙：网格项之间没有设置间隙，即使布局正确也容易出现视觉上的重叠。

修复方案 #

1. 替换无效的自定义网格线名称，改用数字或标准的span语法指定列范围
2. 明确所有网格项的位置，包括subtitle3，避免自动布局冲突
3. 给网格容器添加gap属性，增加元素间的间距
4. 调整subtitle-img的行跨度，避免超出容器行范围

修改后的CSS代码 #

body{
    background: #DCE8FF;
    font-family: 'Times New Roman', Times, serif;
    animation: fadein 2s ease-in 0s 1 normal forwards;
}
.main-container{
    display: grid;
    grid-template-columns: 65% 30%;
    column-gap: 5%;
}
.subtitle-content-grid{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto auto;
    gap: 20px; /* 添加网格间隙 */
}
.subtitle1{
    grid-column: 1 / -1; /* 横跨所有列 */
    grid-row: 1 / 2; 
}
.subtitle2{
    grid-column: 1 / 3; /* 横跨前两列 */
    grid-row: 2 / 4; 
}
.subtitle3{
    grid-column: 1 / 3; /* 指定subtitle3的位置 */
    grid-row: 4 / 5;
}
.subtitle-img{
    display: flex;
    height: auto;
    grid-column: 3 / 4; /* 第三列 */
    grid-row: 2 / 5; /* 从第2行到第5行（覆盖3行） */
    align-items: start; /* 顶部对齐，避免拉伸 */
}
.sub-img{
    max-width: 100%;
    height: auto;
}
.image-gallery{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex: 50%;
    max-width: 60%;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (min-width: 400px) and (max-width: 1000px) {
    .image-gallery {
      flex: 100%;
      max-width: 100%;
    }
    .subtitle-content-grid{
        grid-template-columns: 1fr; /* 移动端改为单列 */
    }
    .subtitle2, .subtitle3, .subtitle-img{
        grid-column: 1 / -1;
    }
}
.image{
    margin-top: 8px;
    vertical-align: baseline;
    width: 46%;
    padding: 5px 10px 5px 5px;
}
.sidebar-content{
    background: #FFE3BF;
}
.post{
    border: 2px solid #FBCA8B;
    margin: 5px;
}
.post>h2,p,a{
    padding-left: 4px;
}
.post>a:hover{
    animation: colorChange 2s ease-out 0s infinite normal;
}
.footer{
    background: linear-gradient(#DCE8FF,steelblue);
    height: 550px;
}
.contact-form{
    margin: 10% 10% 10% 10%;padding: 2% 0 0 0;
    animation: slidein 2s ease-in 0s 1 normal forwards;
}
input[type=text], textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

input[type=submit] {
    background-color: rgb(39, 132, 247);
    color: white;
    font-weight: bold;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=submit]:hover {
    background-color: rgb(25, 25, 157);
}
/*Animations*/
@keyframes colorChange{
    0%{
        color: rgba(0, 145, 255, 0.943);
    }
    50%{
        color: rgb(74, 74, 233);
    }
    100%{
        color: steelblue;
    }
}
@keyframes fadein{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes slidein {
    0%{
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        -ms-transform:translateX(-100%);
    }
    100%{
        -webkit-transform:translateX(0);
        -moz-transform:translateX(0);
        -o-transform:translateX(0);
        -ms-transform:translateX(0);
    }
}

额外优化说明 #

• 简化了grid-column和grid-row的写法（合并start和end）
• 给subtitle-content-grid添加了gap，让元素间有合理间距
• 为移动端添加了响应式布局，将网格改为单列，避免小屏幕下布局错乱
• 移除了冗余的-ms-flexbox前缀，现代浏览器已支持标准flex属性

内容的提问来源于stack exchange，提问作者Mohammad Mustak Absar Khan