在两行中创建具有不同大小列的自定义CSS网格

Question

我在div内创建了一个网格布局，并试图为列创建自定义大小，以便第二行的第一列的宽度应为2fr。因此，当我运行该页面时，它应如下所示：

但现在看起来像这样：

我该如何解决？

#images ul{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "blue blue blue blue"
                         "red red blue blue blue";
}
#images li{
    list-style: none;
}
#images img{
    width: 100%;
}
.red{
    grid-area: red;
}
.blue{
    grid-area: blue;
}

<div id="images">
    <ul>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/jsvrwVj.jpg" alt="Red" class="red">           </li>
    </ul>
</div>