title: How do I set the height of a grids cell using `GridItem(.flexible())`?
body: <p>I am attempting to show a 3 x 3 grid of squares leveraging off of <code>GridItem(.flexible())</code>s ability to automatically calculate the cell width. How can I keep the existing <code>cols</code> defined as it is and get each cell’s height to match its width AND for the grid to layout without overlapping? I’ve reviewed many similar answers but haven’t found one that specifically addresses these concerns.</p>
  <pre class="lang-swift prettyprint-override"><code>struct FlexibleGridView: View {
      
      let cols = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
      let colors: [Color] = [.yellow, .red, .purple, .green, .black, .blue, .orange, .pink, .gray]
      
      var body: some View {
          VStack {
              LazyVGrid(columns: cols, spacing: 10) {
                      ForEach(0...8, id: \.self) { i in
                          GeometryReader { proxy in
                          colors[i]
                              .overlay(
                                  Text(&quot;Hi \(i)&quot;)
                              )
                              .frame(height: proxy.size.width)
  
                      }
                  }
              }
              .frame(height: 300)
          }
          .padding()
      }
  }
  
  struct AdaptiveGridView_Previews: PreviewProvider {
      static var previews: some View {
          FlexibleGridView()
      }
  }
  </code></pre>
  <p>The above code almost works but doesn't layout properly, see image below:</p>
  <p><a href="https://i.stack.imgur.com/JoulT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JoulT.jpg" alt="Resulting layout" /></a></p>