12栅格布局使用grid-column-start/end时CSS Grid多容器列对齐问题求解

我刚接触CSS Grid与Flexbox，想要实现参考示例展示的12栅格布局设计，希望获取最优实现思路。

参考素材包含两类示意图：一类是标准12栅格布局效果参考图，展示了不同跨列宽度的区块排布规则；另一类是列对齐异常的效果示例图，直观呈现了错位问题的实际表现，另有基于Tailwind CSS的可交互演示复现了该异常效果。

在实际使用CSS Grid搭建布局结构的过程中，我遇到了两类核心问题：

• 跨列设置后的对齐异常：尝试通过设置grid-column-start和grid-column-end属性让某列跨更宽宽度（对应参考图中下方的宽幅容器区块）时，会出现多个网格容器的列边缘无法对齐的问题。
• 实现方案选型困惑：不确定自己的基础写法是否存在根本性错误，同时纠结这类多区块栅格的应用场景下，使用Flexbox实现是否会获得更好的效果。

优先希望获取Tailwind CSS的可落地方案，原生CSS实现方案也可接受。

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