Title: SwiftUI doesn't use auto layout, how to create a unique size interface for all devices?
Tags: ios;swiftui;autolayout;widget
Question: I don't use SwiftUI before and try to create the medium widget but I can't recreate the copy of this widget from another program(YouTube Music medium widget), my fourth cells on different screens have a different edge margin, I don't know how to fix this margins because SwiftUI doesn't have auto layout. I posted the code of my widget below, if somebody knows what I did wrong correct me, please.
Screenshot of my Widget and widget What I want:

Code of my widget:
```import WidgetKit
import SwiftUI
import Intents
import Foundation

struct Provider: IntentTimelineProvider {
    func placeholder(in context: Context) -&gt; SimpleEntry {...}

    func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -&gt; ()) {...}

    func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<Entry&gt;) -&gt; ()) {...}
}

struct SimpleEntry: TimelineEntry {...}


struct WidgetTestEntryView : View {
    
    var entry: Provider.Entry
    
    var deeplinkURLFirst: URL {
        URL(string: &quot;\(WIDGET_DEEP_LINK)0&quot;)!
    }
    
    let iconSize: CGFloat = 75.0
    var widgetLabel = &quot;Favourites&quot;
    let mainColor = Color(red: 0.218, green: 0.215, blue: 0.25)
    
    var body: some View {
        
        VStack(spacing: 0) {
            GeometryReader { geo in
                HStack(spacing: geo.size.width * 0.4){
                    Text(widgetLabel).foregroundColor(.white).font(.system(size: geo.size.width * 0.045, weight: .semibold, design: .default)).offset(y: 2)
                    Image(&quot;Label2&quot;).resizable().frame(width: geo.size.width * 0.15, height: 15, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    
                }.frame(maxWidth: .infinity, maxHeight: geo.size.height * 0.7).background(Color.black).offset(y: -5)
            }
            
            GeometryReader { geo in
                HStack(spacing: geo.size.width * 0.1 / 7) {
    
                    Link(destination: deeplinkURLFirst) {
                        ZStack {
                            RoundedRectangle(cornerRadius: 10).foregroundColor(mainColor).frame(width: iconSize, height: iconSize)
                            
                            Image(base64String:&quot;&quot;)?.resizable().frame(width: iconSize, height: iconSize)
                                .cornerRadius(10)
                                .background(mainColor).cornerRadius(10)
                        }.frame(width: iconSize, height: iconSize)
                    }
                    Link(destination: deeplinkURLFirst) {
                        ZStack {
                            RoundedRectangle(cornerRadius: 10).foregroundColor(mainColor).frame(width: iconSize, height: iconSize)
                            
                            Image(base64String: &quot;&quot;)?.resizable().frame(width: iconSize, height: iconSize)
                                .cornerRadius(10)
                                .background(mainColor).cornerRadius(10)
                        }.frame(width: iconSize, height: iconSize)
                    }

                    Link(destination: deeplinkURLFirst) {
                        ZStack {
                            RoundedRectangle(cornerRadius: 10).foregroundColor(mainColor).frame(width: iconSize, height: iconSize)
                            
                            Image(base64String: &quot;&quot;)?.resizable().frame(width: iconSize, height: iconSize)
                                .cornerRadius(10)
                                .background(mainColor).cornerRadius(10)
                        }.frame(width: iconSize, height: iconSize)
                    }

                    Link(destination: deeplinkURLFirst) {
                        ZStack {
                            RoundedRectangle(cornerRadius: 10).foregroundColor(mainColor).frame(width: iconSize, height: iconSize)
                            
                            Image(base64String: &quot;&quot;)?.resizable().frame(width: iconSize, height: iconSize)
                                .cornerRadius(10)
                                .background(mainColor).cornerRadius(10)
                        }.frame(width: iconSize, height: iconSize)
                    }
                    
                }.frame(width: .infinity, height: geo.size.height * 0.9, alignment: .leading).background(Color(red: 0.118, green: 0.118, blue: 0.15)).border(Color.white, width: 0).position(x: geo.size.width * 0.5, y: 20)
            }
            
            
            
        }.frame(maxWidth: .infinity, maxHeight: .infinity).background(Color(red: 0.118, green: 0.118, blue: 0.15)).onAppear {
            print(&quot;all good&quot;)
            
        }
    }
}

@main
struct WidgetTest: Widget {
    let kind: String = WIDGET_PROJECT_NAME

    var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in
            WidgetTestEntryView(entry: entry)
        }
        .configurationDisplayName(&quot;Favourites&quot;)
        .description(&quot;Fast access to favoutires cagetory.&quot;)
        .supportedFamilies([.systemMedium])
    }
}

struct WidgetTest_Previews: PreviewProvider {
    static var previews: some View {
        WidgetTestEntryView(entry: SimpleEntry(date: Date(), configuration: ConfigurationIntent()))
            .previewContext(WidgetPreviewContext(family: .systemMedium))
    }
    
    
}


extension Image {
    init?(base64String: String) {
        guard let data = Data(base64Encoded: base64String, options: .ignoreUnknownCharacters) else { return nil }
        guard let uiImage = UIImage(data: data) else { return nil }
        self = Image(uiImage: uiImage)
    }
}
```

Comment: A suggestion? Change the title of your question. I was going to comment that SwiftUI doesn't use AutoLayout but I saw where you already know that. It's probably a language gap, but as is you question reads like you want to use AutoLayout in SwiftUI, not that you are having an issue related to padding of views in an `HStack`. Good luck!

Here is the accepted answer: SwiftUI does the autolayout for you, it is different than UIKit you are supposed to support all screens at once, that is why the spacing changes but your can set &quot;rules&quot;
```//Prevents the repeating of code
struct ImageView: View {
    var deeplinkURLFirst: URL
    let mainColor: Color
    //Add another parameter for the image info I counldn't reprodice that
    var body: some View {
        Link(destination: deeplinkURLFirst) {
            ZStack {
                RoundedRectangle(cornerRadius: 10)
                    .foregroundColor(mainColor)
                    .overlay(
                    //Keep image within rectangle bounds
                    //The systemName stuff is just to replicate an actual image fill in with your image code
                    Image(systemName: &quot;square&quot;)
                    .resizable())
            }
        }
        //Rule
        //Keep the images squares or you can set frame using your iconSize 
        //for all but the size of an iPhone 7 or SE is not the same 
        //as a ProMax it is best to set a ratio
        //If you fix the size padding will have to give way to adjust for larger/smaller screens.
        .aspectRatio(1, contentMode: .fit)

    }
}
struct WidgetTestEntryView : View {
    //var entry: Provider.Entry //I am just working with the View itself not a widget
    var deeplinkURLFirst: URL {
        URL(string: &quot;\(&quot;WIDGET_DEEP_LINK&quot;)0&quot;)!
    }
    let iconSize: CGFloat = 75.0
    var widgetLabel = &quot;Favourites&quot;
    let mainColor = Color(red: 0.218, green: 0.215, blue: 0.25)
    let setSpacing: CGFloat = 4
    var body: some View {
        //Having multiple of GeometryReader just adds to the confusion look at the View as a whole vs pieces
        //Less is more with SwiftUI it is meant to support multiple screens
        //Set simple rules
        GeometryReader { geo in
        VStack(spacing: 0) {
                //Top portion
                HStack(spacing: geo.size.width * 0.4){
                    Text(widgetLabel).foregroundColor(.white).font(.system(size: geo.size.width * 0.045, weight: .semibold, design: .default))
                    //The systemName stuff is just to replicate an actual image fill in with your image code
                    Image(systemName: &quot;square&quot;).resizable().foregroundColor(.white)
                        .frame(width: geo.size.width * 0.15, height: 15, alignment: .center)
                }
                //Using to many of these will end up causing conflicts
                //SwiftUI does a lot of the work for you
                .frame(maxWidth: .infinity, maxHeight: geo.size.height * (1/3))
                //Rule:
                //This will set the space between the boxes
                HStack(spacing: setSpacing)
                {
                    //Add another parameter for the image info I counldn't reproduce that without data
                    ImageView(deeplinkURLFirst: deeplinkURLFirst, mainColor: mainColor)
                    ImageView(deeplinkURLFirst: deeplinkURLFirst, mainColor: mainColor)
                    ImageView(deeplinkURLFirst: deeplinkURLFirst, mainColor: mainColor)
                    ImageView(deeplinkURLFirst: deeplinkURLFirst, mainColor: mainColor)
                }
                //Rule:
                //Keep the edge of the boxes from the edge of the screen/HStack
                //It is just a minimum so this will give if the space requries it to maintain ratio and spacing between boxes
                .padding(setSpacing)
                
                //This might need adjusting but the % of the top + the % of the bottom should == 1
                .frame(width: geo.size.width, height: geo.size.height * (2/3), alignment: .center)
                //This color needs to be adjusted to the right Color
                .background(Color(UIColor.darkGray))
            }
        }
        .background(Color(red: 0.118, green: 0.118, blue: 0.15))
        //Just to simualte widget size without crating a widget you shouldn't need it in your actual code
        .frame(maxWidth: 350, maxHeight: 150)
        .cornerRadius(20)
        .onAppear {
            print(&quot;all good&quot;)
            
        }
    }
}
```



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:03/26/21', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<ios><swiftui><autolayout><widget>', 'Title': "SwiftUI doesn't use auto layout, how to create a unique size interface for all devices?", 'ViewCount': 463, 'id': 66816292, 'user_AboutMe': None, 'user_AccountId': 19274742.0, 'user_DisplayName': 'Ice', 'user_Reputation': 550.0, 'user_Views': 97.0, 'user_id': 14088005.0}}