如何实现左侧固定内容右侧自适应图片布局且桌面端对齐下方1200px模块

核心修改逻辑 #

• 桌面端给.header设置三列Grid结构，中间列宽度和下方.text完全一致，天然居中对齐
• 头部文本区域放在中间列，视觉图区域从中间列右侧延伸到屏幕右边缘
• 移除固定左padding，保留和下方模块一致的内边距规则，保证内容对齐

调整后的SCSS代码 #

.header {
    display: grid;
    background-color: #f54748;

    @media only screen and (min-width: 992px) {
        /* 三列布局：左右自适应占满剩余空间，中间列和下方text宽度一致 */
        grid-template-columns: 1fr minmax(0, 1240px) 1fr;
    }

    &__content {
        padding: 40px 10px 40px 20px;

        @media only screen and (min-width: 768px) {
            padding: 80px 40px 120px 40px;
        }

        @media only screen and (min-width: 992px) {
            /* 文本区域放在中间列，padding修改为和下方text一致的左右20px即可 */
            grid-column: 2 / 3;
            padding: 100px 20px 250px 20px;
        }
    }

    &__content-copy {
        color: #fee;
        max-width: 320px;
        h1 {
            font-size: 16px;
            line-height: 24px;
        }

        @media only screen and (min-width: 768px) {
            max-width: 600px;
            h1 {
                font-size: 32px;
                line-height: 48px;
            }
        }

        @media only screen and (min-width: 992px) {
            max-width: 700px;
            h1 {
                font-size: 56px;
                line-height: 64px;
            }
        }
    }

    &__visual {
        background-image: url("https://picsum.photos/id/201/656/645");
        background-size: cover;
        height: 100px;

        @media only screen and (min-width: 992px) {
            /* 视觉图从中间列右侧一直延伸到屏幕最右，移除固定margin */
            grid-column: 2 / 4;
            height: auto;
            margin-left: 40px; /* 可根据设计需要调整文本和图片的间距 */
        }
    }
}

.text {
    padding: 40px 20px;
    max-width: 1240px;
    margin: 0 auto;
}

效果说明 #

调整后不管屏幕宽度如何变化，中间列永远和下方的.text模块保持等宽居中，头部文本的左边缘会和下方模块的左边缘完全对齐，不会出现偏移。移动端堆叠布局完全保留原有逻辑，不需要额外调整。

内容的提问来源于stack exchange，提问作者I.Miljancic