Spacing between sections in the same LazyVGrid?

Question

Might be a dumb question and I might have already answered this myself. But, I am trying to put a space between my sections of grids. Currently I am using .padding but this does not seem ideal at all. Or is this really the only way?

var body: some View {
  ScrollView(.vertical) {    
    LazyVGrid(
      columns: columns,
      alignment: .center,
      spacing: 3,
      pinnedViews: [.sectionHeaders, .sectionFooters]) {
        Section(header:Text("GRID 1").font(.title).bold().padding(.top, 10.0)) {
          ForEach(0...9, id: \.self) {
            index in Color(UIColor.random)
              .frame(minWidth: 0, maxWidth: .infinity, minHeight: 75, maxHeight: .infinity)
          }
        }

        Section(header:Text("GRID 2").font(.title).bold().padding(.top, 50.0)) {
          ForEach(10...20, id: \.self) {
            index in Color(UIColor.random)
              .frame(minWidth: 0, maxWidth: .infinity, minHeight: 75, maxHeight: .infinity)
          }
        }
      }
    }
}

Answer 1

If I understand your question correctly, one way to add vertical space between sections in a grid is to add a spacer with an explicit length (e.g. Spacer(minLength: 45)) inside the grid.

struct ContentView: View {

  let gridItemLayout = [GridItem(.adaptive(minimum: 50, maximum: 50))]

  var body: some View {
    List {
      LazyVGrid(columns: gridItemLayout, spacing: 25) {
        SectionView()
        Spacer(minLength: 45)  <-------- VERTICAL SPACE BETWEEN SECTIONS
        SectionView()
      }
    }
  }
}

struct SectionView: View {

  var body: some View {
    Section() {
      Color.red.frame(height: 50)
      Color.black.frame(height: 50)
      Color.green.frame(height: 50)
      Color.blue.frame(height: 50)
      Color.orange.frame(height: 50)
      Color.pink.frame(height: 50)
      Color.gray.frame(height: 50)
    }
  }
}