先來(lái)看效果：

效果圖中呈三行排版，前2行每行3張圖片，最后一行2張圖片。每張圖片頂部和底部都有一些文字，文字又有磨砂效果的背景樣式。

下面介紹實(shí)現(xiàn)過(guò)程：

1.創(chuàng)建一個(gè)公共組件：theme-item,寫入下面的代碼：

<template><view class="themeItem"><navigator url="" class="box"><image class="pic" src="/common/images/classify1.jpg" mode="aspectFill"></image><view class="tab">3天前更新</view><view class="mask">明星美女</view></navigator></view>
</template>

CSS樣式：

<style lang="scss" scoped>.themeItem{.box{height: 340rpx;border-radius: 10rpx;overflow: hidden;position: relative;.pic{width: 100%;height: 100%;}.mask{width: 100%;height: 70rpx;position: absolute;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.2);color: #fff;display: flex;align-items: center;justify-content: center;backdrop-filter: blur(20rpx);font-weight: 600;font-size: 30rpx;}.tab{position: absolute;left:0;top:0;background: rgba(250,129,90,0.7);color: #fff;backdrop-filter: blur(20rpx);font-size: 22rpx;padding: 6rpx 14rpx;border-radius: 0 0 20rpx 0;transform: scale(0.8);transform-origin: left top;}}}
</style>

CSS代碼說(shuō)明：

• 整體結(jié)構(gòu)

? ? ? ?外層容器 .themeItem：作為樣式的作用域容器

• 主盒子 .box：

? ? ?固定高度 340rpx（rpx 是響應(yīng)式單位）

? ? ?圓角 10rpx

? ? overflow: hidden 確保內(nèi)容不超出邊界

? ? 相對(duì)定位（為內(nèi)部絕對(duì)定位元素提供基準(zhǔn)）

• 內(nèi)部元素

? ? ?1 圖片.pic：

? ? ? 寬高 100% 填滿父容器

? ? ? 顯示為裁剪適應(yīng)的圖片

? ? ?2? 底部遮罩層 .mask：

? ? ? ? 絕對(duì)定位在底部

? ? ? ? 高度 70rpx，寬度 100%

? ? ? ?半透明黑色背景 (rgba(0,0,0,0.2))

? ? ? ?白色文字，字體加粗 (font-weight: 600)，字號(hào) 30rpx

? ? ? ?磨砂效果 (backdrop-filter: blur(20rpx))

? ? ? ?使用 flex 布局使內(nèi)容水平垂直居中

? ? 3? 左上角標(biāo)簽 .tab：

? ? ? ? 絕對(duì)定位在左上角

? ? ? ?橙紅色半透明背景 (rgba(250,129,90,0.7))

? ? ? ?白色文字，較小字號(hào) (22rpx)

? ? ? ?右下角圓角 (border-radius: 0 0 20rpx 0)

? ? ? ?縮放 80% (transform: scale(0.8)) 并保持左上角不動(dòng)

? ? ? ?同樣有磨砂效果

2.在主頁(yè)面中引入theme-item組件：

<view class="content"><theme-item v-for="item in 8"></theme-item>
</view>

?CSS樣式：

.content{margin-top: 50rpx;padding: 0 30rpx;display: grid;gap:15rpx;grid-template-columns: repeat(3,1fr);}

上面的代碼引入grid進(jìn)行排版布局：

網(wǎng)格布局 display: grid

啟用 CSS Grid 布局系統(tǒng)

列定義 grid-template-columns: repeat(3, 1fr)

創(chuàng)建 3 列等寬 的網(wǎng)格

1fr 表示每列平均分配可用空間

間隙控制 gap: 15rpx

網(wǎng)格項(xiàng)之間的行/列間隙均為 15rpx

（比傳統(tǒng)的 grid-gap 更簡(jiǎn)潔的寫法）