如何使用CSS Grid实现指定的目标布局？

我想要实现如图所示的布局，尝试了以下Grid代码但未能成功：

HTML代码 #

<ul class="container">
     <li class="first"> </li>
     <li class="second"> </li>
     <li class="third"> </li>
     <li class="fourth"> </li>
</ul>

CSS代码 #

.container{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 20px;
}

.first{
   grid-column: span 2;
}

根据常见的类似布局需求，给出两种解决方案：

方案一：首元素占2行2列，右侧两元素并排，尾元素占满整行

如果目标是首元素高度覆盖两行，右侧两个元素横向并排，尾元素占满整行宽度，调整CSS如下：

.container{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 20px;
}

.first{
   grid-column: span 2;
   grid-row: span 2; /* 让首元素高度占2行 */
}

.fourth{
   grid-column: span 4; /* 尾元素占满4列宽度 */
}

/* 可选：给元素加样式方便查看布局 */
.container li{
   background: #e0e0e0;
   min-height: 100px;
}

方案二：首元素占2列，剩余元素自动填充空白

如果希望首元素占2列后，剩余元素自动填充空白区域，可启用Grid的密集排列特性：

.container{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 20px;
   grid-auto-flow: dense; /* 自动填充空白格子 */
}

.first{
   grid-column: span 2;
}

.fourth{
   grid-column: span 2; /* 让尾元素也占2列 */
}

.container li{
   background: #e0e0e0;
   min-height: 100px;
}

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