Layout
128 bites tagged Layout: interview questions with model answers, and 60-second explainers.
Test yourself: Top 30 Layout interview questions →Multiple choice, with the correct answer and why it is correct on every question. Free, no sign-in.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.
Responsive Layouts with Core React Native APIs
Lean on flexbox, percentage sizing, useWindowDimensions, SafeAreaView, and Platform; recompute on dimension change.
Responsive layout across form factors
Drive layout from dimensions and breakpoints via useWindowDimensions, react to orientation changes, avoid hardcoded OS checks.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.