Layout
128 bites tagged Layout — interview questions with model answers, and 60-second explainers.
Profile card with nested Auto Layout sizing
Outer vertical frame set to fixed width and hug height, an inner horizontal frame for avatar and name, and a bio text set to fill width and auto-height so the card grows down. Auto Layout resizing rules.
Responsive Layouts with Core React Native APIs
Lean on flexbox, percentage sizing, useWindowDimensions, SafeAreaView, and Platform; recompute on dimension change. responsive design without libraries. hardcoding pixel widths or reading Dimensions once.
Responsive layout across form factors
Drive layout from dimensions and breakpoints via useWindowDimensions, react to orientation changes, avoid hardcoded OS checks. responsive, form-factor-aware layout. branching on Platform.OS to detect a tablet.
Using position absolute in React Native
Absolute removes a view from flex flow and positions it relative to its nearest positioned ancestor using top, left, right, bottom; ideal for overlays and badges. when to escape flex flow.
alignItems vs justifyContent in flexbox
JustifyContent aligns along the main axis, alignItems aligns along the cross axis; with column direction main is vertical and cross is horizontal. main vs cross axis understanding.
Default flexDirection and header-content-footer layout
Default flexDirection is column, unlike web's row; give the root flex 1, fixed heights to header and footer, and flex 1 to a scrollable middle. flexbox defaults and a classic layout.
View vs Text and nesting rules
View is a flexbox layout container; Text renders and lays out text with inheritance. Text nests inside Text and inherits style; View inside Text is constrained and discouraged. layout vs text primitives.
The slots pattern for a PageLayout component
Slots are named insertion points so a layout owns structure while consumers fill header, sidebar, and main, via named props or compound subcomponents. named composition regions.
Designing a responsive Grid with breakpoint props
Accept per-breakpoint column props, map them to CSS Grid and media queries or container queries, expose a gap prop. abstracting responsive CSS behind a clean API. leaking raw media-query CSS to every consumer.
CSS Grid versus Flexbox fundamentals
Flexbox is one-dimensional (a single row or column), Grid is two-dimensional (rows and columns together); use Grid for page layout, Flexbox for a toolbar of items. knowing each tool's dimensionality.
Center a div with Flexbox on the parent
Set display flex on parent, justify-content center for the main axis, align-items center for the cross axis. fluency with Flexbox alignment axes.
When container queries beat media queries
Media queries react to viewport, container queries react to a parent's size, ideal for reusable components; set container-type on an ancestor then query it. understanding of component-level responsiveness.
CSS logical properties versus physical properties
Logical properties map to flow direction not fixed sides, padding-inline-start follows text direction, benefit is automatic RTL and vertical support. awareness of writing-mode-aware layout.
What is a CSS containing block?
Containing block is the reference rectangle; static and relative use the nearest block ancestor's content box, absolute uses nearest positioned ancestor, fixed uses the viewport. how percentages and offsets are resolved in layout.
Difference between frame, bounds, and center
Frame and center are in the superview's space; bounds is the view's own space, usually origin zero. A non-identity transform makes frame undefined to read. Coordinate systems and transform effects.
How do you build a custom SwiftUI Layout?
Conform to Layout, implement sizeThatFits to report the container size for a proposal, and placeSubviews to position each subview using its measured size. SwiftUI's Layout protocol for bespoke arrangements.
How does Auto Layout resolve constraints?
Auto Layout solves a system of prioritized linear equations; intrinsicContentSize is a view's natural size; hugging resists growing, compression resistance resists shrinking. understanding constraint-based layout.
How do include, merge, and ViewStub optimize deep layout nesting?
This tests Android view inflation and hierarchy flattening. A strong answer covers include for reuse, merge to strip redundant parents during inflation, and ViewStub for lazy-loading heavy views. A red flag is conflating them or citing XML brevity alone.
How would you structure grids, spacing tokens, and components in Figma?
Tests balancing governance with autonomy via tokens. Propose base-8 semantic spacing tokens, responsive grid variants per breakpoint, and slot-based components with locked auto-layout. Red flag: rigid grids or hardcoded values that block platform needs.
When should you use Frames versus Groups in Figma?
This tests your grasp of Figma's layout primitives and constraint behavior. A strong answer: Frames own constraints, auto layout, and clip content; Groups only pass transforms to children.
How do you apply systematic rules to asymmetrical layouts predictably?
Grid and spacing tokens as guardrails; deliberate ratios create asymmetry, not random offsets; engineers get rules, not pixels. Boxing visual tension with rigid rules.
Alignment: Invisible Lines That Structure Interfaces
Alignment is invisible scaffolding: eyes travel along shared edges instead of hunting anchors. In Figma, left-aligning labels and inputs turns chaos into readable flow. Center-aligning long text is the footgun; ragged invisible edges increase reading friction.
Rhythm and Repetition in UI Layouts
Rhythm turns random elements into scannable patterns by repeating spatial intervals, not just shapes. Use it in lists, dashboards, and card grids where users hunt for information.
New Shadow Tree: Async Layout Engine
The New Shadow Tree is React Native's C++ layout engine that runs off the JS thread. It calculates Yoga flexbox asynchronously before mounting native views.
Get Layout bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.