[Feature Proposal] Auto-sized grid rows and columns with grid-rows-* and grid-cols-* utilities

[benface]

I love the new Grid utilities, but I find myself needing to size individual rows or columns automatically based on their content very often, which doesn't seem possible with the default utilities. Both grid-rows-* and grid-cols-* use minmax(0, 1fr) for the size of the rows/columns, which means they are all the same size (based on the content of the largest row/column). This is a good default for traditional grid layouts (using grid-cols-12 to emulate Bootstrap for instance), but I find it just as useful to be able to have differently sized columns. And for rows, actually I feel like more often than not you want each row to have its own height based on its own content. For these reasons it would be nice to have the exact same utilities with a size of auto instead of minmax(0, 1fr). I have no idea what they could be called though; it almost feels like grid-rows-4 should already work like that by default, but that would be a breaking change. So I'd suggest using custom properties to change the size of explicit rows/columns. For instance:

.grid {
  --grid-row-size: minmax(0, 1fr);
}

.grid-row-size-auto {
  --grid-row-size: auto;
}

.grid-row-size-equal {
  --grid-row-size: minmax(0, 1fr);
}

.grid-rows-1 {
  grid-template-rows: repeat(1, --grid-row-size);
}

.grid-rows-2 {
  grid-template-rows: repeat(2, --grid-row-size);
}

/* ... */

[MarcelloTheArcane]

It would be handy to have grid-auto-rows: 1fr in a class too. See this answer on StackOverflow for why (equal height rows).

[vvo]

Does Tailwind 1.9.0 answers part of this? See https://blog.tailwindcss.com/tailwindcss-1-9

[benface]

Yes and no. In fact, I now realize that it was already possible to achieve what I was looking for, because grid-auto-columns and grid-auto-rows already default to auto. So all you have to do to have auto-sized columns/rows is NOT set any grid-cols-* or grid-rows-* utility, and instead specify on which row/column each item should be with col-start-* / row-start-* utilities, like this:

Auto-sized columns (1 row)

<div class="grid">
  <div class="row-start-1"></div>
  <div class="row-start-1"></div>
</div>

Auto-sized rows (1 column)

<div class="grid">
  <div class="col-start-1"></div>
  <div class="col-start-1"></div>
</div>

That's all there is to it, unless I'm missing something.

[svirins-zz]

Thank you, @benface. Also, get stuck with individual rows sizing. Now, it works!

[svirins-zz]

using with Gatsby, I end with the following:

const Container = styled.div`
  ${tw`grid gap-2`}
  grid-template-rows: auto repeat(3, minmax(0, 1fr)) auto;
  grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto;
`