男女做那个的网站是什么,淄博优化公司,做presentation的网站,沈阳网络科技有限公司目录 一、问题 二、实现方式 三、总结 tiips:如嫌繁琐#xff0c;直接移步总结即可#xff01; 一、问题 1.grid布局可以通过 grid-template-columns来指定列的宽度。且可以通过repeat来指定重复的次数。但是现在的需求是#xff1a;grid布局中元素的数量不确定#…目录 一、问题 二、实现方式 三、总结 tiips:如嫌繁琐直接移步总结即可 一、问题 1.grid布局可以通过  grid-template-columns来指定列的宽度。且可以通过repeat来指定重复的次数。但是现在的需求是grid布局中元素的数量不确定但是需要实现列平均分配且所有元素需要显示在同一行。 具体效果如下图所示 二、实现方式 1.html templatediv classitem-boxdivclassone-itemv-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 langscss 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 langscss 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; /* 希望对你有帮助 如有错误欢迎指正非常感谢 */