如何在不换行到下一行的情况下实现具有水平间距的 Tailwind 网格？

Question

我有一个包含以下内容的部分：

<section class="flex flex-wrap -mx-2">
    <Card
        v-for="(course, index) in courses"
        :key="index"
        :title="course.title"
        :professor="course.professor"
        :price="course.price"
        :excerpt="course.excerpt"
        :image="course.image"
        :category="course.category"
    />
</section>

一个 Card 看起来像这样：

<article class="bg-red mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3 shadow-md rounded bg-white">
    <nuxt-link to="/courses/example-course">
        <img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
    </nuxt-link>
    <div class="p-4">
        <header class="flex justify-between">
            <section>
                <h3 class="text-gray-700">
                    <nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
                </h3>
                <p class="text-gray-600 mt-1" v-text="professor"></p>
            </section>
            <div v-if="price">
                <span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
            </div>
        </header>
        <article class="text-gray-700 mt-2" v-text="excerpt"></article>
    </div>
    <footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
        <span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
        <a href="#" class="text-gray-600 hover:text-blue-600">
            <i v-if="price" class="fa fa-user"></i>
        </a>
    </footer>
</article>

所有这一切的结果如下所示：

如您所见，卡片相互接触，尽管我遵循 Tailwind's docs say 的网格间距。我曾尝试在 <article> 标签上添加 ml-2，但这只会导致过早包装元素并遗漏太多 space.

我做错了什么以及如何在卡片之间添加间隙？谢谢！

Answer 1

带边距的 "problem" 是它位于元素框（模型）的外部，例如它会影响卡的总宽度。例如在大屏幕上你希望它们有 33.33% 的宽度，但是如果你在 left/right 上添加边距，卡片的宽度将是 33.33% + margin 这使得 flexbox 容器在两个项目之后换行，否则总宽度将超过 100%。您可以通过 a) 将事物设置为 box-sizing: border-box（对 margin tough 没有帮助！）和 b）使用 padding 而不是 margin 来创建间隙来解决这个问题，这通常需要某种包装你的内容除了处理间距和大小之外什么都不做，像这样：

<article class="mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
    <div class="card bg-red shadow-md rounded bg-white">
        <nuxt-link to="/courses/example-course">
            <img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
        </nuxt-link>
        <div class="p-4">
            <header class="flex justify-between">
                <section>
                    <h3 class="text-gray-700">
                        <nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
                    </h3>
                    <p class="text-gray-600 mt-1" v-text="professor"></p>
                </section>
                <div v-if="price">
                    <span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
                </div>
            </header>
            <article class="text-gray-700 mt-2" v-text="excerpt"></article>
        </div>
        <footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
            <span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
            <a href="#" class="text-gray-600 hover:text-blue-600">
                <i v-if="price" class="fa fa-user"></i>
            </a>
        </footer>
    </div>
</article>

我知道把标记弄得乱七八糟有点烦人，但这通常是值得的 =)。

编辑：实际上正如文档所说

Add a negative horizontal margin like -mx-2 to your column container and an equal horizontal padding like px-2 to each column to add gutters.

你的问题是 box-shadow 不会让你造成视觉差距，所以从技术上讲你需要包装，因为你的 box-shadow!

如何在不换行到下一行的情况下实现具有水平间距的 Tailwind 网格？

How to implement Tailwind grids with horizontal spacing without wrapping to the next line?

html

css

tailwind-css