如何用纯CSS、HTML实现指定样式的不等宽网格布局？

需求说明 #

想要实现的网格布局效果：顶部1个高度200px的通栏卡片，下方一行排列4个高度100px的卡片，所有卡片带深色边框、渐变背景和阴影，整体居中显示，仅用纯CSS、HTML实现，不使用任何框架或API。

当前尝试代码 #

HTML代码 #

<div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>

CSS代码 #

.grid{
    width: 70%;
    margin: auto;
    margin-top: 120px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: 200px 100px;
    grid-gap: 1rem;
}
.grid-item{
    background-color: #1EAAFC;
    background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    color: #fff;
    border-radius: 4px;
    grid-column: span 2;
    border: 6px solid #171717;
}

问题表现 #

运行代码后，仅显示3个卡片，布局与预期不符，无法实现顶部通栏+下方4个小卡片的效果。

解决方案 #

问题出在全局设置的grid-column: span 2，以及auto-fit列布局的不可控性，调整方案如下：

修改后的CSS代码 #

.grid{
    width: 70%;
    margin: auto;
    margin-top: 120px;
    display: grid;
    /* 固定4列布局，确保下方4个卡片刚好填满一行 */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 200px 100px;
    grid-gap: 1rem;
}
.grid-item{
    background-color: #1EAAFC;
    background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    color: #fff;
    border-radius: 4px;
    border: 6px solid #171717;
}
/* 仅让第一个网格项占满所有列 */
.grid-item:first-child{
    grid-column: 1 / -1;
}

调整说明 #

1. 将grid-template-columns改为repeat(4, 1fr)，固定4列布局，保证下方4个卡片能刚好排列在第二行。
2. 移除全局的grid-column: span 2，仅给第一个网格项设置grid-column: 1 / -1，使其占满整个行宽。
3. 保留原有的渐变背景、阴影、边框等样式，确保视觉效果符合需求。

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