通过 css grid 构建不对称布局，使某区块左侧对齐常规容器、右侧延伸至视口边缘，同时保持移动端正常流式缩放。
通过 css grid 构建不对称布局，使某区块左侧对齐常规容器、右侧延伸至视口边缘，同时保持移动端正常流式缩放。
在构建现代响应式页面时，常需打破常规容器（如 max-width: 1230px）的视觉边界，实现“半受限”设计：即区块左侧与标准内容对齐（维持视觉一致性），右侧则完全撑满至浏览器窗口最右边缘——既突出视觉层次，又不破坏整体布局节奏。
核心思路是绕过传统 .container 嵌套逻辑，改用 CSS Grid 定义全局网格轨道，将视口划分为三列：左侧留白（1fr）、主体内容区（50vw）、右侧扩展区（1fr）。这样，目标区块可跨列布局（grid-column: 2 / span 2），自然实现左对齐容器基准线、右抵边的效果。
以下是完整实现方案：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-section {
height: 100vh;
background: lightblue;
display: grid;
/* 左侧留白 = 右侧留白 = (100vw - 50vw) / 2 → 等效于 1fr 1fr 夹中间 50vw */
grid-template-columns: 1fr 50vw 1fr;
grid-template-rows: 40vh; /* 可按需调整高度 */
}
.section-1 {
grid-column: 2 / span 2; /* 占据中间列 + 右侧列 → 左对齐中间列起点，右抵视口边缘 */
background-color: red;
}
.section-2 {
grid-row: 2; /* 若需多行可扩展 */
grid-column: 2 / span 1; /* 恢复为居中窄列，与其他常规区块一致 */
}
.section-1__content {
height: 100%;
background-color: green;
}
.section-2__content {
height: 100%;
background-color: blue;
}
<div class="main-section">
<div class="section-1">
<div class="section-1__content"></div>
</div>
<div class="section-2">
<div class="section-2__content"></div>
</div>
</div>
✅ 关键优势说明：
- 响应式友好：50vw 在所有屏幕尺寸下动态计算，缩放时自动适配；左侧 1fr 与右侧 1fr 始终对称，确保 .section-1 左侧始终对齐其他区块的容器左边界；
- 无需 JavaScript：纯 CSS 实现，性能高效且兼容性良好（支持 Safari 10.1+、Chrome 57+、Firefox 52+）；
- 语义清晰：脱离嵌套容器束缚，结构扁平化，便于维护与后续扩展。
⚠️ 注意事项：
- 避免在 .section-1 内部再嵌套 .container，否则会引入额外 padding/margin 干扰对齐；
- 若需在 .section-1__content 中添加文字或组件，建议设置 max-width: 1230px + margin: 0 auto 控制内容宽度，保持可读性；
- 移动端小屏下，50vw 可能过宽，建议配合媒体查询优化：
@media (max-width: 768px) { .main-section { grid-template-columns: 1fr; } .section-1 { grid-column: 1; } }
这种布局模式广泛应用于全宽背景图、CTA 横幅、视频区块等场景，在保持设计张力的同时，坚守信息层级与用户体验底线。
