--- title: Building adaptive SwiftUI layouts with... description: An explanation of SwiftUI's containerRelativeFrame() modifier and its three overloads for building adaptive layouts: matching a container dimension, dividing a... canonical: https://daily.dev/posts/building-adaptive-swiftui-layouts-with-containerrelativeframe--ouf2erf86 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building adaptive SwiftUI layouts with containerRelativeFrame() | daily.dev og:description: An explanation of SwiftUI's containerRelativeFrame() modifier and its three overloads for building adaptive layouts: matching a container dimension, dividing a... og:url: https://daily.dev/posts/building-adaptive-swiftui-layouts-with-containerrelativeframe--ouf2erf86 og:image: https://api.daily.dev/og/posts/oUF2ERf86.png og:image:alt: Building adaptive SwiftUI layouts with containerRelativeFrame() og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building adaptive SwiftUI layouts with containerRelativeFrame() **[Nil Coalescing](https://daily.dev/sources/nilcoalescing)** · 5 min read · 1 upvotes · 0 comments ## Summary An explanation of SwiftUI's containerRelativeFrame() modifier and its three overloads for building adaptive layouts: matching a container dimension, dividing a container into equal portions, and calculating a custom relative size via a closure. Code examples show horizontal scrolling day and hour forecast cards and a proportionally sized chart, with guidance on when to use this modifier versus onGeometryChange(). ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I make a SwiftUI view size itself relative to its scroll view container? Use the containerRelativeFrame() modifier with the desired axis, such as .horizontal, applied directly to the view inside a ScrollView. SwiftUI finds the nearest supported container (window, navigation, tab, or scroll view) and sizes the view based on the space available after subtracting safe-area insets and content margins, without needing to observe geometry or store measurements in state. _daily.dev surfaces practical SwiftUI layout techniques for developers building resizable, adaptive interfaces._ ### What is the difference between containerRelativeFrame() and onGeometryChange() in SwiftUI? containerRelativeFrame() directly sizes a view in relation to its container as part of the layout, while onGeometryChange() is meant for cases where resolved geometry needs to produce a separate value or drive behavior, such as storing a measurement in state. The former expresses a sizing relationship declaratively; the latter reacts to geometry changes imperatively. _Comparing SwiftUI layout APIs like this helps developers pick the right tool, something daily.dev readers track closely._ ### How can I divide a SwiftUI scroll view into equal portions with each card spanning multiple portions? Use the count-and-span overload of containerRelativeFrame(), passing count for the total number of equal portions and span for how many portions the view occupies, plus a spacing value matching the container's spacing. For example, count 3 and span 2 makes a card span two of three portions, letting part of the next card remain visible, and SwiftUI recalculates sizes as the scroll view resizes. _daily.dev helps SwiftUI developers keep up with layout patterns like multi-portion card carousels._ ## Similar posts on daily.dev - [Responding to geometry changes in SwiftUI](https://daily.dev/posts/responding-to-geometry-changes-in-swiftui-hosixtvxh) · Nil Coalescing · 1 upvotes · 0 comments --- Tags: [#ios](https://daily.dev/tags/ios), [#ui-design](https://daily.dev/tags/ui-design), [#swift](https://daily.dev/tags/swift), [#swiftui](https://daily.dev/tags/swiftui) [View this post on daily.dev](https://daily.dev/posts/building-adaptive-swiftui-layouts-with-containerrelativeframe--ouf2erf86) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building adaptive SwiftUI layouts with containerRelativeFrame()","url":"https://daily.dev/posts/building-adaptive-swiftui-layouts-with-containerrelativeframe--ouf2erf86","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-adaptive-swiftui-layouts-with-containerrelativeframe--ouf2erf86"},"datePublished":"2026-08-21T06:44:58.279Z","dateModified":"2026-09-13T18:32:40.642Z","description":"An explanation of SwiftUI's containerRelativeFrame() modifier and its three overloads for building adaptive layouts: matching a container dimension, dividing a...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1431d544253145ec71b0812d3a27fcff?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1431d544253145ec71b0812d3a27fcff?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Nil Coalescing","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Nil Coalescing","logo":"https://media.daily.dev/image/upload/s--rcEu6sag--/f_auto,q_auto/v1785654899/logos/nilcoalescing?_a=BAMAMicg0","url":"https://daily.dev/sources/nilcoalescing"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/building-adaptive-swiftui-layouts-with-containerrelativeframe--ouf2erf86","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"ios,ui-design,swift,swiftui","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Nil Coalescing","item":"https://daily.dev/sources/nilcoalescing"},{"@type":"ListItem","position":3,"name":"Building adaptive SwiftUI layouts with containerRelativeFrame()"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/building-adaptive-swiftui-layouts-with-containerrelativeframe--ouf2erf86#faq","mainEntity":[{"@type":"Question","name":"How do I make a SwiftUI view size itself relative to its scroll view container?","acceptedAnswer":{"@type":"Answer","text":"Use the containerRelativeFrame() modifier with the desired axis, such as .horizontal, applied directly to the view inside a ScrollView. SwiftUI finds the nearest supported container (window, navigation, tab, or scroll view) and sizes the view based on the space available after subtracting safe-area insets and content margins, without needing to observe geometry or store measurements in state. daily.dev surfaces practical SwiftUI layout techniques for developers building resizable, adaptive interfaces."}},{"@type":"Question","name":"What is the difference between containerRelativeFrame() and onGeometryChange() in SwiftUI?","acceptedAnswer":{"@type":"Answer","text":"containerRelativeFrame() directly sizes a view in relation to its container as part of the layout, while onGeometryChange() is meant for cases where resolved geometry needs to produce a separate value or drive behavior, such as storing a measurement in state. The former expresses a sizing relationship declaratively; the latter reacts to geometry changes imperatively. Comparing SwiftUI layout APIs like this helps developers pick the right tool, something daily.dev readers track closely."}},{"@type":"Question","name":"How can I divide a SwiftUI scroll view into equal portions with each card spanning multiple portions?","acceptedAnswer":{"@type":"Answer","text":"Use the count-and-span overload of containerRelativeFrame(), passing count for the total number of equal portions and span for how many portions the view occupies, plus a spacing value matching the container's spacing. For example, count 3 and span 2 makes a card span two of three portions, letting part of the next card remain visible, and SwiftUI recalculates sizes as the scroll view resizes. daily.dev helps SwiftUI developers keep up with layout patterns like multi-portion card carousels."}}]} ```