1. 设计目标与场景
1.1 需求与目标
在本篇中，CSS Grid实战旨在展示如何通过网格布局实现复杂水平布局，并通过嵌套方块实现垂直重排的效果。网格容器与网格项的关系是核心，掌握它们能让页面在不同分辨率下保持稳定的排布。
通过对布局路径的设计，我们可以将水平排列的多列块转化为灵活的网格网线，利用自适应列宽、间隙和对齐方式实现平滑的视觉过渡。垂直重排的目标是让嵌套方块在高低不一的内容下仍能高效填充空隙，避免空白区域。
1.2 关键概念回顾
要达到目标，需关注grid-template-columns、grid-template-rows、以及grid-auto-flow等属性的配合使用。通过repeat、minmax和fr单位，可以实现自适应列宽和灵活的轨道分配。
嵌套方块的重排不仅涉及外层网格，也需要理解子网格（subgrid）等进阶概念的潜在应用与限制。本文在演示中将聚焦于常用的网格嵌套和密集填充策略，以实现>垂直重排的实际效果。
2. 构建复杂水平布局的核心
2.1 容器与轨道设计
在一个复杂的水平布局中，网格容器的定义决定了水平轨道的数量和宽度。通过grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));，我们实现了自适应列宽，使每一列在不同视口下自动填充空间。
同时，gap属性让网格项之间的边距一致，提升整体可读性。对齐属性如justify-items与align-items，确保每个块在水平和垂直方向上的定位保持一致。
/* CSS Grid 容器示例：复杂水平布局的核心 */
.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));gap: 12px;align-items: stretch;grid-auto-flow: row dense; /* _dense 为嵌套重排提供填充机会 */
}
.card {background: #f5f5f5;border-radius: 8px;height: 120px;display: flex;align-items: center;justify-content: center;font-weight: 700;
}
12345678abcd9
2.2 对齐与自适应的组合
为了实现复杂水平布局的稳健性，我们可以通过grid-auto-flow与grid-auto-rows组合来控制行高与填充顺序。grid-auto-flow: dense 能在出现空位时重新安排项，提升密度和垂直重排的效果。
配合minmax()与fr单位，我们可以让不同尺寸的网格块在同一网格中协调生长，保证视觉连续性，同时又能在小屏设备上实现自然的换行与 vertical stacking。
3. 实现嵌套方块的垂直重排
3.1 嵌套网格与重排策略
嵌套方块通常采用嵌套网格来实现内部子结构的自定义排布。通过内部网格的grid-template-columns与grid-auto-rows，可以控制内部方块的高度与跨列行为，从而在外部网格发生垂直变化时实现自适应重排。
在实际场景中，最关键的策略是使用grid-auto-flow: dense以及对外部网格的行高自适应设置，使得高度不一致的嵌套块不会产生明显的空白区域，而是按照优先级重新填充到最近的可用位置。
/* 外部网格继续使用密集填充，使垂直重排发生时自动补位 */
.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));grid-auto-rows: 110px;gap: 12px;grid-auto-flow: row dense;
}
.nested-block {padding: 8px;background: #e9f7ff;border-radius: 8px;display: grid;grid-template-columns: 1fr 1fr;grid-auto-rows: 60px;gap: 6px;
}
.inner {background: #d1e7ff;border-radius: 6px;display: flex;align-items: center;justify-content: center;
}
ABCDEF1234GH
3.2 嵌套对齐与排序的实用技巧
除了grid-auto-flow: dense，在嵌套网格内部，我们也可以使用align-self、justify-self以及外部网格的 justify-content 与 align-content，以实现更细粒度的对齐控制。对齐策略直接影响垂直重排的观感与一致性。
需要注意的是，子网格（subgrid）在不同浏览器中的支持情况不同。如果需要跨浏览器一致性，优先选择常规嵌套网格结构，而将子网格作为未来的增强选项进行评估。
4. 实战案例与代码演示
4.1 案例结构与效果说明
在实际项目中，上述布局可以用于仪表盘、图片网格、商品目录等场景。复杂水平布局加上嵌套方块的垂直重排能在宽屏下呈现整齐颗粒的网格，同时在窄屏下保持层级清晰、无缝重排。
通过密集填充策略，嵌套块的高低差不会导致明显的空隙，这是实现垂直重排的关键。结合自适应列宽和合理的间距，页面将具备较强的响应式适配能力。
/* 进一步美化外部网格的外观，提升可读性和可访问性 */
.grid {background: #fff;padding: 16px;border-radius: 12px;box-shadow: 0 6px 20px rgba(0,0,0,.05);
}
.card {background: #f8f9fa;border: 1px solid #e5e5e5;border-radius: 8px;height: 120px;display: flex;align-items: center;justify-content: center;font-weight: 700;
}
Card 1Card 2Card 3Card 4Card 5Nested Blockn1n2n3n4Card 7
