So that each row wouldn’t necessarily be the same number of columns?
While you can set the number of columns a view occupies by using gridCellColumns, I suspect you don’t want the views to occupy a fixed number of columns, and instead flow like multi-line text.
That is, by definition, not a Grid.
You need a different layout to achieve something like that. For example, the SwiftUI-Flow package offers a layout like that.
Usage example:
let test = ["small", "medium", "large", "xlarge", "xxlarge", "foo", "bar", "baz"]
var body: some View {
ScrollView {
HFlow {
ForEach(test, id: \.self) { size in
Text(size)
.font(.system(size: 14))
.foregroundColor(selectedSize == size ? .black : .white)
.padding([.top, .bottom], 10)
.padding([.leading, .trailing], 16)
.background(selectedSize == size ? Color.red : Color.gray)
.cornerRadius(16)
.tag(size)
.onTapGesture {
selectedSize = size
}
}
}
}
}
Output:
You can also set the item spacing, row spacing etc.





