Skip to content

Instantly share code, notes, and snippets.

@jamesporter

jamesporter/NiceLazyVGridLayout.swift

Last active November 5, 2023 16:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jamesporter/81ff12b767b7cbaee88c7fd0944aeead to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jamesporter/81ff12b767b7cbaee88c7fd0944aeead to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jamesporter revised this gist Nov 5, 2023. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions NiceLazyVGridLayout.swift
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    // 1. Set up adapative items (repeat, with min/max width), then add spacing as second argument to GridItem:
    var columns = [GridItem(.adaptive(minimum: 240, maximum: 420), spacing: 8)]
    var columns = [GridItem(.adaptive(minimum: 240, maximum: 420), spacing: spacing)]

    var body: some View {
    VStack {
    ScrollView {
    LazyVGrid(columns: columns) {
    LazyVGrid(columns: columns, spacing: spacing) { // 4. also add spacing here (between rows)
    ForEach(document.state.cards) { card in

    // 2. Item, then with heights that take full width + some fixed height:
    @@ -14,5 +14,5 @@ var columns = [GridItem(.adaptive(minimum: 240, maximum: 420), spacing: 8)]
    .background(.white)
    .cornerRadius(8)
    }
    }.padding()
    }.padding(spacing)
    // 3. Add paddding OUTSIDE the grid
  2. jamesporter created this gist Apr 25, 2023.
    18 changes: 18 additions & 0 deletions NiceLazyVGridLayout.swift
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    // 1. Set up adapative items (repeat, with min/max width), then add spacing as second argument to GridItem:
    var columns = [GridItem(.adaptive(minimum: 240, maximum: 420), spacing: 8)]

    var body: some View {
    VStack {
    ScrollView {
    LazyVGrid(columns: columns) {
    ForEach(document.state.cards) { card in

    // 2. Item, then with heights that take full width + some fixed height:
    .frame(maxWidth: .infinity)
    .frame(height: 480)
    .padding()
    .background(.white)
    .cornerRadius(8)
    }
    }.padding()
    // 3. Add paddding OUTSIDE the grid