title: SwiftUI Grid Layout
body: <p>I'm trying to achieve the following grid layout with SwiftUI but not quite sure on the best approach.</p>
  <p><a href="https://i.stack.imgur.com/IWee7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IWee7.png" alt="enter image description here" /></a></p>
  <p>My code is below and it's not quite getting what I want and also seems hacky to have many nested stacks</p>
  <pre><code>VStack {
              
              VStack {
                  
                  HStack {
                      
                      VStack {
                          
                          Text(&quot;Text Here&quot;)
                          Text(&quot;336.851&quot;)
                          
                      }
                      .padding(20)
                      .background(ColorManager.orange)
                      .cornerRadius(10)
                      
                      VStack {
                          
                          Text(&quot;Text Here&quot;)
                          Text(&quot;336.851&quot;)
                          
                      }
                      .padding(20)
                      .background(ColorManager.red)
                      .cornerRadius(10)
                      
                  }
                  
                  HStack {
                      
                      VStack {
                          
                          Text(&quot;Text Here&quot;)
                          Text(&quot;336.851&quot;)
                          
                      }
                      .padding(20)
                      .background(ColorManager.green)
                      .cornerRadius(10)
                      
                      VStack {
  
                          Text(&quot;Text Here&quot;)
                          Text(&quot;336.851&quot;)
  
                      }
                      .padding(20)
                      .background(ColorManager.blue)
                      .cornerRadius(10)
  
                      VStack {
  
                          Text(&quot;Text Here&quot;)
                          Text(&quot;336.851&quot;)
  
                      }
                      .padding(20)
                      .background(ColorManager.purpleLight)
                      .cornerRadius(10)
                      
                  }
                  
                  
              }
              
          }
  </code></pre>
  <p>My code gives the below result, I'm just not sure how I would max the boxes span half and a third of the screen. Also, is the approach I've taken with nested stack the right way?</p>
  <p><a href="https://i.stack.imgur.com/e8WyU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e8WyU.png" alt="enter image description here" /></a></p>