Support bare 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 <[email protected]>
Co-authored-by: Philipp Spiess <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Experimental_: Add `scripting`, `scripting-none`, and `scripting-initial` variants ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128))
 - _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370))
 - _Experimental_: Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128))
+- Add `col-<number>` and `row-<number>` utilities for `grid-column` and `grid-row` ([#15183](https://github.com/tailwindlabs/tailwindcss/pull/15183))
 
 ### Fixed
 

packages/tailwindcss/src/utilities.test.ts

@@ -1086,6 +1086,8 @@ test('order', async () => {
 test('col', async () => {
   expect(
     await run([
+      'col-11',
+      '-col-12',
       'col-auto',
       'col-span-4',
       'col-span-17',
@@ -1094,7 +1096,15 @@ test('col', async () => {
       'col-span-[var(--my-variable)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".col-\\[span_123\\/span_123\\] {
+    ".-col-12 {
+      grid-column: calc(12 * -1);
+    }
+
+    .col-11 {
+      grid-column: 11;
+    }
+
+    .col-\\[span_123\\/span_123\\] {
       grid-column: span 123 / span 123;
     }
 
@@ -1213,6 +1223,8 @@ test('col-end', async () => {
 test('row', async () => {
   expect(
     await run([
+      'row-11',
+      '-row-12',
       'row-auto',
       'row-span-4',
       'row-span-17',
@@ -1221,7 +1233,15 @@ test('row', async () => {
       'row-span-[var(--my-variable)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".row-\\[span_123\\/span_123\\] {
+    ".-row-12 {
+      grid-row: calc(12 * -1);
+    }
+
+    .row-11 {
+      grid-row: 11;
+    }
+
+    .row-\\[span_123\\/span_123\\] {
       grid-row: span 123 / span 123;
     }
 

packages/tailwindcss/src/utilities.ts

@@ -651,6 +651,11 @@ export function createUtilities(theme: Theme) {
    */
   staticUtility('col-auto', [['grid-column', 'auto']])
   functionalUtility('col', {
+    supportsNegative: true,
+    handleBareValue: ({ value }) => {
+      if (!isPositiveInteger(value)) return null
+      return value
+    },
     themeKeys: ['--grid-column'],
     handle: (value) => [decl('grid-column', value)],
   })
@@ -719,6 +724,11 @@ export function createUtilities(theme: Theme) {
    */
   staticUtility('row-auto', [['grid-row', 'auto']])
   functionalUtility('row', {
+    supportsNegative: true,
+    handleBareValue: ({ value }) => {
+      if (!isPositiveInteger(value)) return null
+      return value
+    },
     themeKeys: ['--grid-row'],
     handle: (value) => [decl('grid-row', value)],
   })