Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v4] arbritary values for row and col classes #15170

Closed
subhero24 opened this issue Nov 25, 2024 · 6 comments · Fixed by #15183
Closed

[v4] arbritary values for row and col classes #15170

subhero24 opened this issue Nov 25, 2024 · 6 comments · Fixed by #15183

Comments

@subhero24
Copy link

In v4 utilities some utilities like grid-cols-12 and z-40 do not depend on the theme values and just work.

Does that mean that row-42 should also just work? Because it does not work in v4.0.0-beta.2.
I still need the square brackets like row-[42].

@adamwathan
Copy link
Member

Hey! I think you're looking for row-start-42 which will work. row-[42] didn't work in v3 and is a new class in v4 for the shorthand grid-row property where I think it's most common to pass multiple values like grid-row: 3 / 6 but it does work with one value too so maybe we can make that work anyways also.

@subhero24
Copy link
Author

I think col-[42] and row-[42] already did work in v3:
https://play.tailwindcss.com/eSauO2KMnr

It would be nice if col-42 also worked. Maybe even mapping to grid-column: 42 / span 1 instead of the grid-column: 42 in v3 (which is maybe a little weird if col-end- was set separately).

@adamwathan
Copy link
Member

I think col-[42] and row-[42] already did work in v3:

Wow I swear when I went to test it it didn't but clearly I'm wrong 😅 Will make this work, hilariously I didn't even know you could do this and I'm excited to be able to start writing col-3 instead of col-start-3 all the time now.

@subhero24
Copy link
Author

Thanks!

Also related to arbitrary values for grid utilities: I use to write grid-rows-[1fr,auto] in v3, but that does not work in v4 anymore with the comma as a seperator. Don't know if this is intentional or not.

@adamwathan
Copy link
Member

@subhero24 Ah yeah need to use underscores there, we supported commas for 5 seconds when v3 was first released before switching to underscores because sometimes you need real commas in arbitrary values 👍

@philipp-spiess
Copy link
Member

Hey! Thanks again for your feature request. We're still thinking of adding bare col-* and row-* utilities but since this is not a bug right now but a new feature, we're going to close this issue in the mean time. 👍

philipp-spiess added a commit that referenced this issue Feb 27, 2025
Resolves #15170.

This PR adds support for bare integer values to the `col-*` and `row-*`
utilities:

```css
.col-5 {
  grid-column: 5;
}
.row-6 {
  grid-row: 6;
}
```

These properties are shorthands for
`grid-column-start`/`grid-column-end` and
`grid-row-start`/`grid-row-end`, so using a bare integer value ends up
being a shortcut for:

```css
.col-5 {
  grid-column-start: 5;
  grid-column-end: auto;
}
```

…which makes these basically work like an alternative to `col-start-*`
and `row-start-*`.

These support negative values like `-col-6` as well, which also
technically extends to arbitrary values like `-col-[6/span_2]` now even
though that is a junk value. I've decided not to guard against that
though and just consider it user error to keep the implementation
simple.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants