Use variables for gap

[bakura10]

Hi,

This is an attempt to the feature I suggested there: #8118

I think there could be some improvement for the naming of the actual utility, but it should work pretty well already.

Let me know what you think :)

[adamwathan]

Hey interesting idea and thanks for the PR! Right now my gut is that this feels a bit too opinionated to bake into core, but I spent a few minutes and you can actually achieve what you are trying to achieve completely from user-land without making any changes to Tailwind at all using the new-ish arbitrary properties feature to set your own CSS variables:

https://play.tailwindcss.com/BcWLE8a0R0

The markup looks like this:

<div class="grid grid-cols-fit-6 place-content-center gap-x-[var(--fit-gap)] [--fit-gap:theme(spacing.8)]">
  <div class="h-48 bg-blue-500"></div>
  <div class="h-48 bg-blue-500"></div>
</div>

...and I've added your suggested grid-cols-fit values just to the regular gridTemplateColumns config, but prefixing each value with fit:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        'fit-1': 'repeat(auto-fit, minmax(0, 1fr)',
        'fit-2': 'repeat(auto-fit, minmax(0, calc((100% / 2) - var(--fit-gap) / 2)))',
        'fit-3': 'repeat(auto-fit, minmax(0, calc((100% / 3) - var(--fit-gap) / 3 * 2)))',
        'fit-4': 'repeat(auto-fit, minmax(0, calc((100% / 4) - var(--fit-gap) / 4 * 3)))',
        'fit-5': 'repeat(auto-fit, minmax(0, calc((100% / 5) - var(--fit-gap) / 5 * 4)))',
        'fit-6': 'repeat(auto-fit, minmax(0, calc((100% / 6) - var(--fit-gap) / 6 * 5)))',
        'fit-7': 'repeat(auto-fit, minmax(0, calc((100% / 7) - var(--fit-gap) / 7 * 6)))',
        'fit-8': 'repeat(auto-fit, minmax(0, calc((100% / 8) - var(--fit-gap) / 8 * 7)))',
        'fit-9': 'repeat(auto-fit, minmax(0, calc((100% / 9) - var(--fit-gap) / 9 * 8)))',
        'fit-10': 'repeat(auto-fit, minmax(0, calc((100% / 10) - var(--fit-gap) / 10 * 9)))',
        'fit-11': 'repeat(auto-fit, minmax(0, calc((100% / 11) - var(--fit-gap) / 11 * 10)))',
        'fit-12': 'repeat(auto-fit, minmax(0, calc((100% / 12) - var(--fit-gap) / 12 * 11)))',
      },
    },
  },
  plugins: [],
}

So going to close this one just because I don't want to increase the API surface area here and commit to supporting and maintaining this myself, but what I've shared above should let you do this in your own projects pretty easily already. Thanks either way, still appreciate the contribution even if saying no this time 👍🏻