模板:GridLayoutModule

       <img src="path/to/map-image.jpg" alt="地图">

       <img src="path/to/xiangrui-image.jpg" alt="祥瑞">

       <img src="path/to/danji-image.jpg" alt="丹药">

       <img src="path/to/bojie-image.jpg" alt="搏捷">

       <img src="path/to/youji-image.jpg" alt="游记">

       <img src="path/to/fabao-image.jpg" alt="法宝">

       <img src="path/to/kaoguan-image.jpg" alt="考究">

       <img src="path/to/fashu-image.jpg" alt="法术">

<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>