justify- utilities don't work with grid, or documentation problem

[robinp]

What version of Tailwind CSS are you using?

Tailwind Play's current.

Reproduction URL

https://play.tailwindcss.com/FWLNKoZUHs

Describe your issue

The Tailwind docs under Flexbox & Grid > Justify Content write Utilities for controlling how flex and grid items are positioned along a container's main axis.

That makes one believe that justify-... could be used to control grid item placement as well. For example, that justify-around or justify-end would affect item placement.

That is true using the plain CSS grid, assuming that there's free horizontal space around the grid items on which these placement controls can be applied.

But, (note: I'm no CSS export) it seems Tailwind's grid-cols-N styles generate a grid-template-columns that will take up all the available space per grid item, so there's no room left for the controls to kick in, effectively resulting in no-op placement.

See the linked Tailwind Play. But to be brief:

What Tailwind generates, kind of (see the grid-template-columns):

<div class="bg-blue-100" style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: flex-end;">
  <div class="mx-auto bg-red-100">1</div>
  <div class="mx-auto bg-red-200">2 2</div>
  <div class="mx-auto bg-red-300">3 3 3</div>
</div>

Using manual CSS with max-content instead of the minmax(0, 1fr) works:

<div class="bg-blue-100" style="display: grid; grid-template-columns: repeat(3, max-content); justify-content: flex-end;">
  <div class="bg-red-100">1</div>
  <div class="bg-red-200">2 2</div>
  <div class="bg-red-300">3 3 3</div>
</div>

Now I understand that the grid template gives lot of options on the column sizing (see https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#track-size, though I'm a bit lost in grid docs), and it might not be Tailwind's profile to pick a single choice or give finer control of this choice (or what are even the common choices, no idea). But it would then be nice if the docs pointed out these controls won't work for grid, as it could save quite some time.

(Thank you btw for Tailwind, it is a gift! Bought Refactoring UI too, excellent book. Now I can stop writing bootstrap-as-a-programmer, and write... tailwind-as-a-programmer)

[robinp]

Note: related issues: #1628, #32

[adamwathan]

Hey! So you're right that with the default grid column classes we include, the justify-content CSS property (which is what utilities like justify-end control) has no effect, because our grid column utilities ensure that each column expands to fill the space available, so there's no empty space to justify the columns within.

The justify-* utilities do "work" though, in the sense that they do exactly what they would do if you wrote all of the same CSS by hand, and they do have an effect if you set up your grid columns in a way that they don't expand.

You can do that by adding your own grid column values in the config:

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        '3-max': 'repeat(3, max-content)',
      }
    }
  }
}

...or by using arbitrary values:

<div class="grid grid-cols-[repeat(3,max-content)]">
  <!-- ... -->
</div>

You can see then that the justify-* utilities have the effect you'd expect:

https://play.tailwindcss.com/mUWqBkQ6Qv

But yeah, when using columns defined like repeat(3, minmax(0, 1fr)), the columns fill all the available space so justify-contents has no effect.

Hope that helps!