Add gridCellColumns modifier. (#196)

Part of #51.

Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md

@@ -44,7 +44,7 @@ Tailwind utility | Slipstream modifier
 [Flex Shrink](https://tailwindcss.com/docs/flex-shrink) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Order](https://tailwindcss.com/docs/order) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Grid Template Columns](https://tailwindcss.com/docs/grid-template-columns) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
-[Grid Column Start / End](https://tailwindcss.com/docs/grid-column) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
+[Grid Column Start / End](https://tailwindcss.com/docs/grid-column) | ``View/gridCellColumns(_:condition:)``, ``View/gridCellColumns(_:condition:)-2tedw``
 [Grid Template Rows](https://tailwindcss.com/docs/grid-template-rows) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Grid Row Start / End](https://tailwindcss.com/docs/grid-row) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Grid Auto Flow](https://tailwindcss.com/docs/grid-auto-flow) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)

Sources/Slipstream/Documentation.docc/TailwindCSS/FlexboxAndGrid/FlexboxAndGrid-GridColumnStartEnd.md

@@ -0,0 +1,14 @@
+# Grid column start / end
+
+Utilities for controlling how views are sized and placed across grid columns.
+
+## Topics
+
+### Modifiers
+
+- ``View/gridCellColumns(_:condition:)``
+- ``View/gridCellColumns(_:condition:)-2tedw``
+
+### Supporting types
+
+- ``GridSpan``

Sources/Slipstream/TailwindCSS/FlexboxAndGrid/View+gridCellColumns.swift

@@ -0,0 +1,27 @@
+extension View {
+  /// Tells a view that acts as a cell in a grid to span the specified number of columns.
+  ///
+  /// - SeeAlso: Tailwind CSS' [grid-column](https://tailwindcss.com/docs/grid-column) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func gridCellColumns(_ count: Int, condition: Condition? = nil) -> some View {
+    return modifier(
+      TailwindClassModifier(
+        add: "col-span-\(count)",
+        condition: condition
+      )
+    )
+  }
+
+  /// Tells a view that acts as a cell in a grid to span the specified number of columns.
+  ///
+  /// - SeeAlso: Tailwind CSS' [grid-column](https://tailwindcss.com/docs/grid-column) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func gridCellColumns(_ span: GridSpan, condition: Condition? = nil) -> some View {
+    return modifier(
+      TailwindClassModifier(
+        add: "col-span-" + span.rawValue,
+        condition: condition
+      )
+    )
+  }
+}

Sources/Slipstream/TailwindCSS/GridSpan.swift

@@ -0,0 +1,5 @@
+/// A generic representation of a span in a grid.
+@available(iOS 17.0, macOS 14.0, *)
+public enum GridSpan: String {
+  case full
+}

Tests/SlipstreamTests/TailwindCSS/FlexboxAndGrid/GridCellColumnsTests.swift

@@ -0,0 +1,14 @@
+import Testing
+import Slipstream
+
+struct GridCellColumnsTests {
+  @Test func columns() throws {
+    try #expect(renderHTML(Div {}.gridCellColumns(1)) == #"<div class="col-span-1"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(2)) == #"<div class="col-span-2"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(3)) == #"<div class="col-span-3"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(4)) == #"<div class="col-span-4"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(5)) == #"<div class="col-span-5"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(6)) == #"<div class="col-span-6"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(.full)) == #"<div class="col-span-full"></div>"#)
+  }
+}