为什么我的CSS Grid子元素不从第一列开始排布？

已尝试操作 #

• 搜索了相关问题，了解到可通过类似3 / span 2的语法指定元素起始位置
• 尝试为元素设置grid-column-start属性，取值分别为auto、0、1，均未解决问题

代码片段 #

HTML 代码 #

<div class="landing-page">
    <div class="container">
        <div class="landing-page-item image">Image</div>
        <div class="landing-page-item text">Text Here</div>
    </div>
</div>

SCSS 代码 #

.landing-page {
    height: 100vh;
    width: 100vw;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    box-shadow: 0 12px 21px #7889b6;
    
    .container {
        padding-top: 100px;
        display: grid;
        height: 100%;
        grid-template-rows: repeat(6, 1fr);
        grid-template-columns: repeat(9, 1fr);
        grid-column-start: 1;
    }
}

.landing-page-item {
    display: flex;
    justify-content: center;
    align-items: center;
    
    &.image {
        grid-row: span 4;
        grid-column: span 2;
        background-color: green;
    }
    
    &.text {
        grid-row: span 4;
        grid-column: span 6;
        background-color: red;
    }
}

预期效果 #

• Image元素从网格最左上角开始排布，占据2列、4行的空间
• Text元素紧接Image右侧排布，占据6列、4行的空间

实际效果 #

两个元素未按预期横向并排排布，出现错位。

问题修正 #

1. 移除.container（网格容器）上的冗余属性grid-column-start: 1：该属性属于网格子项的定位属性，对容器设置会被浏览器直接忽略，无实际作用。
2. 网格线计数从1开始，为子项设置grid-column-start: 0属于无效值，会被浏览器忽略或自动钳位为1，无法起到定位作用。
3. 原有代码依赖网格自动放置逻辑排布子项，易受残留测试样式、自动放置算法的隐式逻辑影响出现错位。建议显式指定两个子项的起始网格线位置，完全规避不确定性。
4. 可选添加box-sizing: border-box，避免容器的padding撑大整体尺寸导致的溢出问题。

修正后的SCSS代码：

.landing-page {
    height: 100vh;
    width: 100vw;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    box-shadow: 0 12px 21px #7889b6;
    box-sizing: border-box;
    
    .container {
        padding-top: 100px;
        display: grid;
        height: 100%;
        box-sizing: border-box;
        grid-template-rows: repeat(6, 1fr);
        grid-template-columns: repeat(9, 1fr);
    }
}

.landing-page-item {
    display: flex;
    justify-content: center;
    align-items: center;
    
    &.image {
        // 显式指定从第1行第1列开始，占4行2列
        grid-row: 1 / span 4;
        grid-column: 1 / span 2;
        background-color: green;
    }
    
    &.text {
        // 显式指定从第1行第3列开始，占4行6列
        grid-row: 1 / span 4;
        grid-column: 3 / span 6;
        background-color: red;
    }
}

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