# StandardGradientGrid

[SwiftUI](../../../..) ⟩ [layout](../..) ⟩ [grids](..) ⟩ [LazyVGrid]() ⟩ &#x20;

{% hint style="info" %}

{% endhint %}

<figure><img src="https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2F0JMGyxBMtZxK8TD92b5j%2Fstandard%20gradient%20grid.jpeg?alt=media&#x26;token=b35d9cd6-0872-46a1-8350-0c6c916ae259" alt=""><figcaption><p>LazyVGrid (8 fixed columns)</p></figcaption></figure>

{% tabs %}
{% tab title="💾 程式" %}
```swift
import SwiftUI

struct StandardGradientGrid: View {

    let spacing: CGFloat = 8
    let width: CGFloat = 80    // column width
    
    // 8 columns
    var columns: [GridItem] {
        // ⭐️ last GridItem's spacing is ignored.
        Array(
            repeating: GridItem(
                .fixed(width),        // ⭐️ fixed width
                spacing: spacing+6    // spacing to next column
            ), 
            count: 8
        )
    }
    
    var body: some View {
        // ⭐️ lazy v grid
        LazyVGrid(columns: columns, spacing: spacing) { // spacing between rows
            ForEach(Color.standardColors, id: \.self) { color in
                Swatch(name: color.name, size: 80) { color.gradient }
            }
        }.padding() 
    }
}

// previews
struct StandardGradientGrid_Previews: PreviewProvider {
    static var previews: some View {
        StandardGradientGrid()
    }
}
```
{% endtab %}

{% tab title="📘 手冊" %}
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [LazyVGrid](https://developer.apple.com/documentation/swiftui/lazyvgrid)
{% endtab %}

{% tab title="💈範例" %}
*
{% endtab %}
{% endtabs %}

