Merge pull request #774 from JPToroDev/grid

Fix positioning issues caused by nested `<div>`s in `Grid`.

Author: twostraws

Sources/Ignite/Elements/Grid.swift

@@ -149,6 +149,7 @@ public struct Grid: HTML, HorizontalAligning {
                 } else {
                     handleItem(item)
                         .class(gutterClass)
+                        .render()
                 }
             }
         }
@@ -157,15 +158,17 @@ public struct Grid: HTML, HorizontalAligning {
     }
 
     /// Removes a column class, if it exists, from the item and reassigns it to a wrapper.
-    private func handleItem(_ item: any HTML) -> some HTML {
+    private func handleItem(_ item: any HTML) -> any HTML {
         var item = item
         var name: String?
         if let widthClass = item.attributes.classes.first(where: { $0.starts(with: "col-md-") }) {
             item.attributes.remove(classes: widthClass)
             name = scaleWidthClass(widthClass)
         }
 
-        return Section(item)
+        item = item.isSection ? item : Section(item)
+
+        return item
             .class(name ?? "col")
             .class(alignment.vertical.itemAlignmentClass)
     }
@@ -185,6 +188,7 @@ public struct Grid: HTML, HorizontalAligning {
         return ForEach(passthrough.items) { item in
             handleItem(item.attributes(attributes))
                 .class(gutterClass)
+                .render()
         }
     }
 

Sources/Ignite/Framework/ElementTypes/HTML.swift

@@ -89,6 +89,11 @@ extension HTML {
     var isImage: Bool {
         self is Image || (self as? AnyHTML)?.wrapped is Image
     }
+
+    /// A Boolean value indicating whether this represents `Section`.
+    var isSection: Bool {
+        self is Section || (self as? AnyHTML)?.wrapped is Section
+    }
 }
 
 extension HTML {