Layout
128 bites tagged Layout — interview questions with model answers, and 60-second explainers.
Reanimated Layout Animations: Auto-Morphing Views
Reanimated's layout prop auto-animates view bounds between layout passes. Use it when state changes make views shift, expand, or reorder so you avoid manual measurement code. It conflicts with gesture-driven transforms, causing jumps if mixed.
Touchable Components in React Native
TouchableOpacity and siblings wrap views to give press feedback by dimming or highlighting. Use them for simple taps on buttons or list items. They inject extra Animated.View nodes that can silently break layout, and Pressable has superseded the entire family.
Which widget overlays and centers a loading indicator on an image?
Stack with Image first (bottom), then Center-wrapped indicator; constrain Stack to image. Stack overlays and centering non-positioned children. Column/Row or manual Positioned offsets instead of Stack/Center alignment.
Explain 'constraints go down, sizes go up, parent sets position.'
Tests Flutter layout protocol and unbounded width errors. Strong answers trace how a child gets infinite width from a scrolling parent and fix it with a bounded wrapper. Red flag: blaming the child without tracing parent constraints.
What problem does IntrinsicWidth solve and what are its performance costs?
This tests Flutter constraints and intrinsic sizing. A great answer covers: capping width to the child's max intrinsic width, aligning Column children, and the speculative pass that costs O(N²) in tree depth. A red flag is omitting performance cost.
Explain Flutter's 'constraints down, sizes up' rule and unbounded height error
Parents constrain down, children size up. ListView in Column throws unbounded height as Column gives infinite maxHeight; fix with Expanded or shrinkWrap. Flutter's constraint protocol.
Fix RenderFlex overflow in Row with long truncating text
Wrap Text in Expanded; set overflow to TextOverflow.ellipsis and maxLines: 1; leave siblings unwrapped. Flutter Row constraints and bounding Text width for ellipsis without affecting sibling sizes.
How do Flexible and Expanded differ in a Row or Column?
Tests Flutter main-axis flex constraints. Key point: Flexible uses FlexFit.loose so the child may be smaller than its space share; Expanded uses FlexFit.tight so the child must fill its share.
mainAxisAlignment vs crossAxisAlignment in Column, and textDirection in Row
Tests Flutter flex axis awareness. In a Column, mainAxisAlignment is vertical and crossAxisAlignment is horizontal. In a Row, textDirection governs the main axis, not crossAxisAlignment; verticalDirection governs the cross axis.
How do you split a Column 1/3 and 2/3 using Expanded?
Tests understanding of flex allocation in Flutter layouts. Strong answers wrap both containers in Expanded, assign flex values of 1 and 2, and note that Expanded forces children to fill the Column's main axis. Red flag: proposing fixed heights instead of flex.
In a Row, how do you space children evenly across the width?
Set mainAxisAlignment to spaceEvenly; contrast with spaceBetween and spaceAround. Row main-axis layout and MainAxisAlignment. Using manual SizedBox spacers instead of the built-in alignment enum.
Page Templates: The Floor Plan for UI
Page templates are the floor plan, not the furniture: fixed zones where components slot in. Use them for recurring screens like dashboards so teams stop rebuilding skeletons. The footgun is treating them as giant components, forcing brittle overrides later.
Card Pattern: Self-Contained Content Objects
A card groups related info into a bounded, scannable object you can rearrange like playing cards. Use it for dashboards, product grids, or feeds where items need equal visual weight.
Using CSS Grid, how do repeat, auto-fit, and minmax create responsive columns?
Tests intrinsic sizing and responsive tracks without media queries. A strong answer gives repeat(auto-fit, minmax(250px, 1fr)), noting repeat generates tracks, auto-fit collapses empties, and minmax sets a floor with fractional growth.
How can CSS aspect-ratio and modern layout properties prevent CLS?
Set width/height attributes, use CSS aspect-ratio for responsive scaling, and reserve container space with min-height. Your grasp of reserving render space before media loads.
How do min-content, max-content, and fit-content work in CSS Grid?
It tests intrinsic track sizing. A strong answer defines min-content as the smallest no-overflow width, max-content as widest no-wrap width, and fit-content as clamped max-content; then shows labels hugging longest word.
What problem does subgrid solve? Give a concrete example.
This tests whether you know nested grids create track contexts breaking cross-level alignment. A strong answer explains subgrid inherits parent tracks, using a card whose internals align to a global page grid.
Implement a fixed-width sidebar with Flexbox and CSS Grid
This tests Flexbox as one-dimensional versus Grid as 2-dimensional. A strong answer covers Flexbox with flex: 1 on main and flex: none on sidebar, and Grid with grid-template-columns: 250px 1fr. Red flag: claiming Grid is always superior or ignoring overflow.
Explicit vs implicit grid: how do you control implicit tracks?
Explicit tracks use grid-template; implicit tracks appear on overflow. Control via grid-auto-rows/columns and grid-auto-flow. Grid track generation beyond explicit bounds.
Create a responsive card grid without media queries
This tests CSS Grid intrinsic sizing. Answer: grid-template-columns with repeat(auto-fit, minmax(min, 1fr)), leveraging repeat, minmax, and auto-fit for fluid wrapping. Red flag: defaulting to Flexbox or media queries instead of intrinsic grid behavior.
Explain flex-grow, flex-shrink, flex-basis and their interaction
Tests deep understanding of flexbox sizing beyond keywords. A strong answer defines grow and shrink as ratios for distributing leftover or overflow space, basis as the starting size, and explains the two-step calculation.
CSS Grid: difference between 1fr and auto column sizing?
Tests fractional vs intrinsic sizing. 1fr divides leftover space; auto shrinks to content. Note that 1fr minimums default to auto, causing overflow with unbreakable content, unlike auto tracks. Red flag: claiming they are identical or auto always fills space.
What is margin collapsing? Give a sibling scenario and prevention.
This tests understanding of vertical margin combination in normal flow. A strong answer defines collapsing, gives a sibling paragraph example where the larger margin wins, and names a block formatting context or padding as prevention.
Explain the CSS box model: content-box vs border-box
Tests if you understand how width maps to rendered size. Good answers contrast content-box (350px + 10px border = 370px) with border-box (stays 350px) and note that four width:25% items break under content-box. Red flag: saying border-box includes margin.
Get Layout bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.