SwiftUI GridRow background

Question

Is there a way to set the background of an entire GridRow inside a Grid? I would appreciate a generic solution for an n x m matrix of cells. Below is a simple example to illustrate the issue.

The code below sets the background of each individual cell, but I would like to set the background of the row regardless of the spacing between the cells. Notice the gap between columns 1 and 2. Such a feature is useful in showing selecting an entire row in a grid table.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Grid {
            GridRow {
                Text("Column 1")
                Text("Column 2")
            }
            GridRow {
                Text("Row 1 value 1")
                Text("Row 1 value 2")
            }
            GridRow {
                Text("Row 2 value 1")
                Text("Row 2 value 2")
            }
            .background(Color.red)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

A GridRow is like a Group, so modifiers applied to the row get applied to each of the items in the row. Since the Grid adds default spacing between the items, the background color is not continuous across the row.

As mentioned in a comment, a simple way to work around the problem is to use zero horizontal spacing, then add padding to the individual items:

Grid(horizontalSpacing: 0) { // 👈 remove horizontal spacing
    GridRow {
        Text("Column 1")
        Text("Column 2")
    }
    GridRow {
        Text("Row 1 value 1")
        Text("Row 1 value 2")
    }
    GridRow {
        Text("Row 2 value 1")
        Text("Row 2 value 2")
    }
    .padding(.horizontal, 5) // 👈 add horizontal padding
    .background(.red)
}

Of course, setting zero horizontal spacing will apply to all rows, so padding may need to be added to other rows too.

---

An alternative technique is to set the horizontal spacing for the Grid to a fixed size, then apply negative padding to the colored background, to eliminate the gap:

Grid(horizontalSpacing: 10) { // 👈 define the horizontal spacing
    GridRow {
        Text("Column 1")
        Text("Column 2")
    }
    GridRow {
        Text("Row 1 value 1")
        Text("Row 1 value 2")
    }
    GridRow {
        Text("Row 2 value 1")
        Text("Row 2 value 2")
    }
    .background {
        Color.red
            .padding(.horizontal, -5) // 👈 negative padding
    }
}

This gives the same result as before, where the background has square corners.

Rounded corners can be achieved by extending the negative padding to compensate for the corner radius too:

.background {
    RoundedRectangle(cornerRadius: 5)
        .fill(.red)
        .padding(.horizontal, -10)
}