title: How do I change the fixed size of a Lazy Grid GridItem in response to Dynamic Text size changes?
body: <p>The code below is using a <code>LazyVGrid</code> to implement layout of my controls such that everything lines up like this:</p>
  <p><a href="https://i.stack.imgur.com/mzYmY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mzYmY.png" alt="enter image description here" /></a></p>
  <p>Particularly, the sliders' ends all align and the symbols are centre-aligned to each other. I have worked out how to size the GridItems for the symbol and the numeric readout such that they are the 'right size' for their contents — something neither flexible nor adaptive GridItems will do — <em>while accounting for Dynamic Type</em>.</p>
  <p>In testing, this works really well so long as the user does not change their Dynamic Type size once the app is active. If that is done, the type (and symbols) will adapt as they should, but the GridItem size remains fixed at its initial value. This causes the numbers to wrap at the decimal point.</p>
  <p>Is there a way to have the GridItem resize in response to Dynamic Type changes, or is there a better way to do this layout?</p>
  <pre><code>import SwiftUI
  
  struct ProtoGrid: View {
     let gridItems = [
        GridItem(.fixed(UIImage(systemName: &quot;ruler&quot;, withConfiguration: UIImage.SymbolConfiguration(textStyle: .body, scale: .large))!.size.width)),
        GridItem(.flexible(minimum: 40, maximum: .infinity)),
        GridItem(.fixed((&quot;00.00&quot; as NSString).size(withAttributes: [NSAttributedString.Key.font: UIFont.preferredFont(forTextStyle: .body)]).width + 4), alignment: .trailing)
     ]
     @State var index1 = 5.0
     @State var index2 = 5.0
     @State var index3 = 5.0
     var body: some View {
        VStack {
           Rectangle()
              .fill(Color.red)
           LazyVGrid(columns: gridItems, spacing: 12) {
              Image(systemName: &quot;person&quot;).imageScale(.large)
              Slider(value: $index1, in: 0...10)
              Text(&quot;\(String(format: &quot;%.2f&quot;, index1))&quot;).font(Font.system(.body).monospacedDigit())
              Image(systemName: &quot;megaphone&quot;).imageScale(.large)
              Slider(value: $index2, in: 0...10)
              Text(&quot;\(String(format: &quot;%.2f&quot;, index2))&quot;).font(Font.system(.body).monospacedDigit())
              Image(systemName: &quot;ruler&quot;).imageScale(.large)
              Slider(value: $index3, in: 0...10)
              Text(&quot;\(String(format: &quot;%.2f&quot;, index3))&quot;).font(Font.system(.body).monospacedDigit())
           }
           .padding()
        }
     }
  }
  
  struct ProtoGrid_Previews: PreviewProvider {
      static var previews: some View {
          ProtoGrid()
           .previewDevice(&quot;iPhone 11 Pro&quot;)
      }
  }
  111
  </code></pre>