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