关于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>
相关推荐
华仔啊2 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel2 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴2 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel2 小时前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
前端大卫3 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin3 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学4 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室6 小时前
CSS高效开发三大方向
前端·css
昔人'6 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾6 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js