符合内容大小的网格框答案

【问题标题】：Gridbox to conform to content size符合内容大小的网格框
【发布时间】：2021-10-22 17:47:12
【问题描述】：

所以我这里有这个简单的表：

代码相当简单：

<template>
    <div class="table">
        <div class="table__headers">
            <h3 v-for="header in headers" :key="header.value">
                {{ header.value }}
            </h3>
        </div>
        <div class="table__body">
            <div
                v-for="(item, index) in modelData"
                :key="index"
                class="table__body--line"
            >
                <p v-for="{ property } in headers" :key="property">
                    <router-link
                        :to="{ name: 'AdminJob', params: { id: item.id } }"
                    >
                        {{ item[property] }}
                    </router-link>
                </p>
            </div>
        </div>
    </div>
    <Pagination
        v-model:current-page="meta.currentPage"
        :total="meta.total"
        v-model:per-page="meta.perPage"
    />
</template>


<style scoped lang="scss">
.table {
    border: solid 1px red;

    &__headers {
        display: grid;
        grid-gap: 10px;
        grid: 50px / auto-flow minmax(100px, 1fr);
    }

    &__body {
        display: flex;
        flex-direction: column;
        grid-gap: 10px;
        &--line {
            display: grid;
            grid-gap: 10px;
            grid: auto / auto-flow minmax(200px, 1fr);
        }
    }
}
</style>

我想要实现的是使列的宽度可以灵活地适应其中的内容。

所以在上面的基础中，由于 Details 的内容比 Status 多得多，它会填充更多的空间。另一个需要注意的是，这个 Vue 组件显示了许多不同的信息表。在其他情况下，我们可能只有 2 列，而在其他情况下我们可能有 8 列，所以我试图找出一个“全局”解决方案，而不需要进入每个表并修改宽度。

在 Grid 中有没有更简单的方法来做到这一点？我尝试了 Flexbox，但无法让列像在 Grid 中那样完美对齐。

【问题讨论】：

标签： css vue.js css-grid

【解决方案1】：

对于列的灵活性，您可以使用 css-variables 并将其与 Vue 的样式绑定进行绑定。

<template>
  <div class="table" :style="{ '--cols': counts }">
    <div v-for="header in headers" :key="header">
      <h3 class="table__headers">{{ header }}</h3>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      headers: [
        "apple",
        "ndis officia! Perferendis ratione blanditiis repellat explicabo neque",
        "lorem ipsum dolor sit amet",
        "mango"
      ],
    };
  },
  computed: {
    counts: function () { return this.headers.length < 4 ? `${l}` : "auto-fit" },
  },
};
</script>

<style scoped>
.table {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(100px, max-content));
  gap: 10px;
}
.table__headers { ... }
</style>

【讨论】：

【解决方案2】：

您必须在代码中使用grid-template-columns:min-content。这个page可以帮助你。

【讨论】：