CSS Grid实现指定布局及移动端块顺序调整问题求助

需求说明 #

• 桌面端实现3列Grid布局，布局效果如下图：
  
• 移动端需按照block3、block1、block4、block2、block5的顺序排列

最初实现问题 #

最开始编写了2行的grid-template-areas配置：

grid-template-areas:
"block1 block3 block5"
"block2 block4 block5";

该配置无法达到预期效果：由于block3高度比block1小，中间列的绿色block3和黄色block4无法上下贴合。

可行解决方案 #

改用3行的grid-template-areas配置即可解决问题，代码如下：

grid-template-areas:
"block1 block3 block5"
"block1 block4 block5"
"block2 block4 block5";

内容的提问来源于stack exchange，提问作者Алексей Передерий