查看“模板:GridLayoutModule”的源代码

<div class="grid-container">
    <div class="grid-item map">
        <img src="path/to/map-image.jpg" alt="地图">
    </div>
    <div class="grid-item xiangrui">
        <img src="path/to/xiangrui-image.jpg" alt="祥瑞">
    </div>
    <div class="grid-item danji">
        <img src="path/to/danji-image.jpg" alt="丹药">
    </div>
    <div class="grid-item bojie">
        <img src="path/to/bojie-image.jpg" alt="搏捷">
    </div>
    <div class="grid-item youji">
        <img src="path/to/youji-image.jpg" alt="游记">
    </div>
    <div class="grid-item fabao">
        <img src="path/to/fabao-image.jpg" alt="法宝">
    </div>
    <div class="grid-item kaoguan">
        <img src="path/to/kaoguan-image.jpg" alt="考究">
    </div>
    <div class="grid-item fashu">
        <img src="path/to/fashu-image.jpg" alt="法术">
    </div>
</div>
<style>

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    background-color: #73c16f; /* 绿色背景 */
    padding: 20px;
}

.grid-item {
    background-color: white;
    border-radius: 20px;
    padding: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-item img {
    border-radius: 20px; /* 圆角 */
    width: 100%;
    height: auto;
}

/* 设置不同项目的特定大小 */
.grid-item.map {
    width: 284px;
    height: 172px;
    grid-column: span 2;
}

.grid-item.fashu {
    width: 172px;
    height: 284px;
    grid-row: span 2;
}

.grid-item.xiangrui, 
.grid-item.danji, 
.grid-item.bojie, 
.grid-item.youji, 
.grid-item.fabao, 
.grid-item.kaoguan {
    width: 217px;
    height: 217px;
}
</style>