title: How to make SwiftUI Grid lay out evenly based on width?
body: <p>I'm trying to use a SwiftUI Lazy Grid to lay out views with strings of varying lengths.  How can I construct my code so that, e.g. if 3 view's do not fit, it will only make 2 columns and push the 3rd view to the next row so that they won't overlap?</p>
  <pre><code>struct ContentView: View {
      var data = [
      &quot;Beatles&quot;,
      &quot;Pearl Jam&quot;,
      &quot;REM&quot;,
      &quot;Guns n Roses&quot;,
      &quot;Red Hot Chili Peppers&quot;,
      &quot;No Doubt&quot;,
      &quot;Nirvana&quot;,
      &quot;Tom Petty and the Heart Breakers&quot;,
      &quot;The Eagles&quot;
     
      ]
      
      var columns: [GridItem] = [
          GridItem(.flexible()),
          GridItem(.flexible()),
          GridItem(.flexible())
      ]
      
      
      var body: some View {
          LazyVGrid(columns: columns, alignment: .center) {
              ForEach(data, id: \.self) { bandName in
                  Text(bandName)
                      .fixedSize(horizontal: true, vertical: false)
              }
          }
          .padding()
      }
  }
  
  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
          ContentView()
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/MWIF7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MWIF7.png" alt="enter image description here" /></a></p>