如何在高寒选色机中更改项目数？

Question

我将https://codepen.io/mithicher/pen/LYpXxmX中的颜色选择器添加到我的tailwindcss 2/al菠萝js2.8应用程序中，它可以工作，但它在1行中显示颜色项3圈，我没有找到如何在代码中更改它：

    <di v class="rounded-md bg-white shadow-xs px-4 py-3">
        <div class="flex flex-wrap -mx-2">
            <template x-for="(color, index) in colorPickerColors" :key="index">
                <div
                    class="px-2"
                >
                    <template x-if="colorSelected === color">
                        <div
                            class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white"
                            :style="`background: ${color}; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);`"
                        ></div>
                    </template>

                    <template x-if="colorSelected != color">
                        <div
                            @click="colorSelected = color"
                            @keydown.enter="colorSelected = color"
                            role="checkbox"
                            tabindex="0"
                            :aria-checked="colorSelected"
                            class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white focus:outline-none focus:shadow-outline"
                            :style="`background: ${color};`"
                        ></div>
                    </template>
                </div>
            </template>
        </div>
    </div>

因为我在colorPickerColors数组中有18个项目，所以我需要在3行中的任何一个中显示6个项。

如果有任何提示，我如何在上面的代码中这样做？

谢谢!

Answer 1

根据代码链接，将宽度改为w-56而不是w-40，以便为6个圆圈创建更多的空间。

然后，不要使用flex flex-wrap，而是使用grid grid-cols-6

编辑：

• 我强烈推荐凯文鲍威尔的CSS网格视频。
• 请查一下顺风栅格模板。