Beginner: Layout Basics
beginner: layout basics layout basics — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops
Introduction
Layout Basics — 25 interview questions with traps, follow-ups, and production context. Practice out loud; staff loops reward trade-offs, not definitions.
Business problem
Business pressure: Product teams need Layout Basics interview questions to ship polished UI without layout regressions, accessibility lawsuits, or LCP regressions that hurt conversion.
- Conversion: Visual polish and performance directly affect checkout and signup funnels.
- Brand: Inconsistent Layout Basics interview questions implementation fragments design system trust.
- Velocity: CSS debt slows every feature team — architecture matters at scale.
Why this feature exists
Platform history: CSS evolved Layout Basics interview questions to solve author needs without JavaScript layout engines or table hacks.
- Problem solved: Declarative styling separated from document structure.
- Rejected alternative: Inline styles and JS layout — unmaintainable at enterprise scale.
Browser rendering perspective
Rendering impact: Layout Basics interview questions affects style recalculation, layout, paint, and composite stages in the browser pipeline.
- Chrome (Blink): Style → LayoutNG → Paint → Viz compositor.
- Firefox (Gecko): Servo-based stylo + WebRender compositing.
- Safari (WebKit): WebKit style resolver + GPU layer promotion rules.
Internal browser workflow
Workflow: Selector match → cascade → computed values → layout tree → paint layers → composite.
Real production example
Production: Netflix, Amazon, and Shopify enforce Layout Basics interview questions patterns via design tokens, lint rules, and visual regression CI.
Enterprise use case
Enterprise: Design systems (Polaris, Carbon, Atlassian) codify Layout Basics interview questions in token pipelines and component APIs.
Accessibility considerations
A11y: CSS must not remove focus visibility, break zoom, or convey state by color alone (WCAG 2.2).
Performance considerations
Performance: Layout Basics interview questions can trigger reflow, expensive selectors, or layer explosion — profile with DevTools Performance panel.
SEO considerations
SEO: CSS affects LCP, CLS, and mobile usability — ranking signals tied to Core Web Vitals.
Scalability considerations
Scale: Layout Basics interview questions choices compound across micro-frontends, white-label tenants, and dark-mode variants.
Common production issues
Production failures: Specificity wars, z-index stacks, and responsive breakpoints that work in Chrome but break Safari.
Debugging guide
Debug: Chrome DevTools → Elements (computed styles), Layout panel, Rendering layers, Coverage for unused CSS.
Interview questions
What is normal flow?(Beginner)
Default block and inline layout in document order — foundation before flex/grid.
Follow-up: What creates new formatting context?
What is position: static?(Beginner)
Default — element in normal flow. Trap: thinking top/left work without non-static.
Follow-up: Which properties need non-static?
What is position: relative?(Beginner)
Offset from normal position; still occupies original space. Trap: z-index only works on positioned elements.
Follow-up: relative without offsets — why?
What is position: absolute?(Beginner)
Removed from flow; positioned to containing positioned ancestor. Trap: absolute without inset scrolls away oddly.
Follow-up: Nearest positioned ancestor?
What is position: fixed?(Beginner)
Relative to viewport — trap: transformed ancestor creates containing block.
Follow-up: fixed vs sticky?
What is position: sticky?(Beginner)
Hybrid until threshold then fixed within scroll container. Trap: parent overflow:hidden breaks sticky.
Follow-up: sticky top 0 not working?
What is z-index?(Beginner)
Stack order in stacking context — not global. Trap: z-index 9999 wars.
Follow-up: What creates stacking context?
What is float?(Beginner)
Legacy wrap text around images — prefer flex/grid for layout. Trap: clearfix hacks still in old codebases.
Follow-up: Why floats avoided?
What is clear?(Beginner)
Clears floated elements — historical layout.
Follow-up: Flex replaces float when?
What is display: flex?(Beginner)
One-dimensional layout — row or column. Trap: flex on wrong axis causes overflow.
Follow-up: flex-direction row vs column?
What is display: grid?(Beginner)
Two-dimensional layout — rows and columns together.
Follow-up: Grid vs flex decision?
What is align-items?(Beginner)
Cross-axis alignment in flex/grid — center vertically in row flex.
Follow-up: align vs justify?
What is justify-content?(Beginner)
Main-axis distribution — space-between, center.
Follow-up: justify-content space-around?
What is flex: 1?(Beginner)
Shorthand flex-grow flex-shrink flex-basis — fills space. Trap: min-width:auto prevents shrink.
Follow-up: flex 1 overflow fix?
What is grid-template-columns?(Beginner)
Defines column track sizes — repeat(3, 1fr) common.
Follow-up: fr unit meaning?
What is grid-area?(Beginner)
Named placement in template areas — readable layouts.
Follow-up: grid-area shorthand?
What is overflow auto?(Beginner)
Scroll when needed — better than hidden for a11y sometimes.
Follow-up: scroll vs auto?
What is object-fit?(Beginner)
How replaced content fills box — cover for thumbnails.
Follow-up: object-fit contain vs cover?
What is vertical centering history?(Beginner)
flex align-items center or grid place-items — table-cell legacy.
Follow-up: Why not margin-top 50% hack?
What is inline-block layout?(Beginner)
Side-by-side with width — gaps from whitespace; use flex gap instead.
Follow-up: inline-block gap problem?
What is calc()?(Beginner)
Computes lengths — calc(100% - 2rem) sidebar layouts.
Follow-up: calc with different units?
What is minmax in grid?(Beginner)
minmax(200px, 1fr) responsive without media queries.
Follow-up: Auto-fit vs auto-fill?
What is place-items?(Beginner)
Shorthand align + justify items in grid.
Follow-up: place-content vs place-items?
What is order in flex?(Beginner)
Visual reorder only — trap: breaks tab order for a11y.
Follow-up: Accessible reorder?
What is width 100vw trap?(Beginner)
100vw includes scrollbar — horizontal overflow; use 100% instead.
Follow-up: 100vw overflow bug?
Hands-on exercise
Mock interview drill: Answer all 25 questions out loud in 45 minutes. Record yourself explaining trade-offs, not just definitions.
Try it yourself
Edit the CSS panel — the preview updates live. Use DevTools Performance and Accessibility panels to validate.