目录
tiips:如嫌繁琐,直接移步总结即可!
一、问题
1.grid布局可以通过 grid-template-columns来指定列的宽度。且可以通过repeat来指定重复的次数。但是现在的需求是:grid布局中元素的数量不确定,但是需要实现列平均分配;且所有元素需要显示在同一行。
具体效果,如下图所示:
二、实现方式
1.html
<template>
<div class="item-box">
<div
class="one-item"
v-for="(oneEnum, oneEnumKey) of arr|| []"
>
{{ oneEnum.value }}
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
setup() {
const arr=[
{
value: "0.05%",
color: "blue",
},
{
value: "1次",
color: "green",
},
{
value: "0.95km",
color: "blue",
},
]
return{
arr
}
},
});
</script>
2.grid布局列平均分配
grid-template-columns:repeat(auto-fit,minmax(20px,1fr))
第一个参数:auto-fit:列数根据内容自动计算
第二个参数:规定每个盒子的最小宽度20px,按照最小宽度放下足够多的盒子后,还有剩余宽度,则会撑开每一个盒子
<style lang="scss" scoped>
.item-box{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(20px, 1fr));
grid-gap:20px 0;
.one-item {
color: #02ad40;
background: rgba(2, 173, 64, 0.08);
text-align: center;
padding: 24px 8px;
}
}
</style>
3.gird布局独占一行
grid-auto-flow:column;
4.最终结果如下:
代码:
<style lang="scss" scoped>
.item-box{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(20px, 1fr));
grid-auto-flow:column;
grid-gap:20px 0;
.one-item {
color: #02ad40;
background: rgba(2, 173, 64, 0.08);
text-align: center;
padding: 24px 8px;
}
}
</style>
三、总结
1.列数未知时,使用repeat函数,第一个参数设置auto-fit;第二个参数使用minmax设置最小宽度和1fr
2.gird布局独占一行: grid-auto-flow:column;
/*
希望对你有帮助!
如有错误,欢迎指正,非常感谢!
*/