关于CSS Grid布局

关于CSS Grid布局

实际效果参考

参考代码

<template><view class="baseInfo"><up-image class="cover" height="160rpx" width="120rpx" :src="bookInfo.cover"><template #error><view style="font-size: 24rpx;">加载失败</view></template></up-image><up-text class="title" :text="bookInfo.title" :lines="1" :size="15" bold /><up-text class="desc" type="info" :size="14" :text="bookInfo.desc" wordWrap="anywhere" :lines="2" /><view class="tags"><up-tag class="tag" v-for="tag in bookInfo.tags" :text="tag" size="mini" plain plainFill /></view></view>
</template><script setup lang="ts">import { reactive, ref } from 'vue'const props = defineProps({bookInfo: {type: Object,default: '',},});
</script><style scoped lang="scss">.baseInfo {margin: 2%;padding: 2%;display: grid;grid-template-columns: repeat(1, 120rpx) repeat(5, 1fr);/* 第一列固定宽度，其余列自适应 */grid-template-rows: repeat(3, auto);grid-template-areas:"cover title title title title title""cover tags tags tags tags tags""cover desc desc desc desc desc";grid-gap: 2%;border-radius: 8rpx;background-color: #FFF;* {max-width: 86%;}.cover {grid-area: cover;}.title {grid-area: title;}.desc {color: #080808;grid-area: desc;}.tags {grid-area: tags;.tag {padding-right: 2%;}}}
</style>