grid布局所有元素在同一行显示且等分列

最新推荐文章于 2024-08-07 13:57:00 发布

琹箐

最新推荐文章于 2024-08-07 13:57:00 发布

阅读量1k

点赞数 11

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_45327886/article/details/136545624

版权

本文介绍了在Vue项目中，如何使用CSSGrid布局处理元素数量不确定但需要平均分配到列的情况，同时实现元素独占一行。关键点包括auto-fit计算列数和minmax设置最小宽度和比例单位1fr。

摘要由CSDN通过智能技术生成

一、问题

二、实现方式

三、总结

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>