关于CSS Grid布局

关于CSS Grid布局

实际效果参考

参考代码

vue 复制代码
<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>
相关推荐
DokiDoki之父2 分钟前
前端速通—Vue_简介 & 第一个Vue程序 & el:挂载点 & data:数据对象 & Vue指令
javascript·vue.js·ecmascript
RickyWasYoung1 小时前
【matlab】字符串数组 转 double
android·java·javascript
csj501 小时前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
万少1 小时前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
3秒一个大2 小时前
掌握 Stylus:让 CSS 编写效率倍增的预处理器
css
inx1772 小时前
深入理解 CSS 弹性布局:从传统布局到 Flex 的优雅演进
css·flexbox
好玩的Matlab(NCEPU)2 小时前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰2 小时前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome
Crystal3282 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476682 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis