文章来源:https://www.toymoban.com/news/detail-718334.html
<template>
<div class="box">
<div class="content">
<div class="box1" style="background-color: rgb(245,23,156)">第一个</div>
<div class="box2" style="background-color: rgb(12,233,3)">第二个</div>
<div class="box3" style="background-color: rgb(109,5,255)">第三个</div>
<div class="box4" style="background-color: rgb(233,187,3)">第四个</div>
<div class="box5" style="background-color: rgb(233,3,34)">第五个</div>
<div class="box6" style="background-color: rgb(245,23,156)">第六个</div>
<div class="box7" style="background-color: rgb(3,179,233)">第七个</div>
<div class="box8" style="background-color: rgb(233,187,3)">第八个</div>
</div>
</div>
</template>
<script>
export default {
components: {//组件
},
provide() {
return {};
},
data() {
return {};
},
created() { //创建时
},
methods: {}
};
</script>
<style scoped>
.box{
height: calc(100% - 40px);
background-color: red;
padding: 20px;
}
.content{
width: 100%;
height: 100%;
background-color: #fff;
/* 设置网格布局 */
display: grid;
/* 设置列数 每个行岁站的份数 */
grid-template-columns: repeat(3,1fr);
/* 设置行数 每个行所占的份数 */
grid-template-rows: repeat(3,1fr);
/* 网格间距 */
gap: 10px;
}
/* 跨列 */
.box7{
grid-column: span 2;
}
</style>
文章来源地址https://www.toymoban.com/news/detail-718334.html
<template>
<div class="box">
<div class="content">
<div class="box0" style="background-color: #409EFF">
此处未标题
</div>
<div class="box1" style="background-color: rgb(245,23,156)">第一个</div>
<div class="box2" style="background-color: rgb(12,233,3)">第二个</div>
<div class="box3" style="background-color: rgb(109,5,255)">第三个</div>
<div class="box4" style="background-color: rgb(233,187,3)">第四个</div>
<div class="box5" style="background-color: rgb(233,3,34)">第五个</div>
<div class="box6" style="background-color: rgb(245,23,156)">第六个</div>
<div class="box7" style="background-color: rgb(3,179,233)">第七个</div>
<div class="box8" style="background-color: rgb(233,187,3)">第八个</div>
</div>
</div>
</template>
<script>
export default {
components: {//组件
},
provide() {
return {};
},
data() {
return {};
},
created() { //创建时
},
methods: {}
};
</script>
<style scoped>
.box{
height: calc(100% - 40px);
background-color: red;
padding: 20px;
}
.content{
width: 100%;
height: 100%;
background-color: #fff;
/* 设置网格布局 */
display: grid;
/* 设置列数 每个行岁站的份数 */
grid-template-columns: repeat(3,1fr);
/* 设置行数 每个行所占的份数 这种是统一样式固定排列
grid-template-rows: repeat(3,1fr);*/
grid-template-rows: 50px 1fr 1fr 1fr;/* 解读: 第一行50px高度 后面默认统一 */
/* 网格间距 */
gap: 10px;
}
/* 跨列 */
.box7{
grid-column: span 2;
}
.box0{
grid-column: span 3;
}
</style>
到了这里,关于vue首页多模块布局(标题布局)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!