mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
col-* and row-* utilities (#15183)
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>
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
Discuss Tailwind CSS on GitHub
For chatting with others using the framework:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.
Description
Languages
JavaScript
90.6%
CSS
7.6%
HTML
1.7%