# NColumns

[SwiftUI](https://lochiwei.gitbook.io/ios/swiftui) ⟩ [Layout](https://lochiwei.gitbook.io/ios/swiftui/view/layout) ⟩ [LazyGrids](https://lochiwei.gitbook.io/ios/swiftui/view/layout/grids) ⟩ [example](https://lochiwei.gitbook.io/ios/swiftui/view/layout/grids/examples) ⟩ 

{% tabs %}
{% tab title="💈範例" %}
{% embed url="<https://youtu.be/8xPBzBzC5fU>" %}

⬆️ 需要： [watermark](https://lochiwei.gitbook.io/ios/custom/ext/view/watermark "mention")

```swift
// 🌀 usage: `GridItem() * 5`
extension GridItem {
    static func * (item: GridItem, n: Int) -> [GridItem] {
        Array(repeating: item, count: n)
    }
}

struct ContentView: View {
    
    // ⭐ as many columns as possible
    let adaptiveColumns = [
        GridItem(.adaptive(minimum: 80))
    ]
    
    // ⭐ 5 columns (flexible)
    let nColumns = GridItem(.flexible()) * 5    // 🌀 GridItem extension
    
    // ⭐ first column width fixed
    let firstColFixed = [
        GridItem(.fixed(100)),
        GridItem(.flexible()),
    ]
    
    var body: some View {
        VStack {
            HStack {
                NColumns(columns: firstColFixed)
                    // 🌀 View + .watermark()
                    .watermark(fgColor: .black, bgColor: .gray){ 
                        Text("first column fixed") 
                    }
                NColumns(columns: nColumns)
                    .watermark(fgColor: .black, bgColor: .gray){ 
                        Text("5 columns") 
                    }
            }
            NColumns(columns: adaptiveColumns)
                .watermark(fgColor: .black, bgColor: .gray){ 
                    Text("adaptive") 
                }
        }
    }
}
```

{% endtab %}

{% tab title="📦 NColumns" %}

```swift
struct NColumns: View {
    
    let columns: [GridItem]
    
    var body: some View {
        ScrollView {
            // ⭐ use columns
            LazyVGrid(columns: columns, spacing: 20) {
                // ❓ how to show the border of each grid item?
                ForEach(1..<100) { 
                    Text("item \($0)")
                        .font(.caption)
                        .foregroundColor(.label2)
                        .padding([.horizontal])
                        .padding(.vertical, 6)
                        .border(Color.blue)        // text border
                }
            }
            .padding()
        }
        .frame(maxHeight: 300)
        .border(Color.pink)        // scroll view border
    }
}
```

{% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [View Layout and Presentation](https://developer.apple.com/documentation/swiftui/view-layout-and-presentation) ⟩
  * [LazyVGrid](https://developer.apple.com/documentation/swiftui/lazyvgrid) (<mark style="color:red;">**struct**</mark>)
  * [LazyHGrid](https://developer.apple.com/documentation/swiftui/lazyhgrid) (<mark style="color:red;">**struct**</mark>)
  * [GridItem](https://developer.apple.com/documentation/swiftui/griditem) (<mark style="color:red;">**struct**</mark>) - control **alignment**, **spacing**, **size** (width or height).
    {% endtab %}

{% tab title="📗 參考" %}

* [x] Paul ⟩ [How to position views in a grid using LazyVGrid and LazyHGrid](https://www.hackingwithswift.com/quick-start/swiftui/how-to-position-views-in-a-grid-using-lazyvgrid-and-lazyhgrid) - (💈範例)
  {% endtab %}

{% tab title="❓" %}
{% hint style="warning" %}
問：How to show the border of each grid item❓
{% endhint %}
{% endtab %}
{% endtabs %}