Advanced CSS Layouts

Flexbox (Flexible Box Layout) is a one-dimensional layout model — it arranges items along a single main axis (row or column) and handles alignment on the perpendicular cross axis.

Activating flexbox: Set display: flex on a container element. Its direct children become flex items automatically.

Axes: The main axis is defined by flex-direction:

• row (default) — left to right
• row-reverse — right to left
• column — top to bottom
• column-reverse — bottom to top

The cross axis is always perpendicular to the main axis.

Container properties:

• justify-content — distributes items along the main axis: flex-start, flex-end, center, space-between, space-around, space-evenly
• align-items — aligns items along the cross axis within each line: stretch (default), flex-start, flex-end, center, baseline
• align-content — aligns multiple lines when flex-wrap is active
• flex-wrap — nowrap (default), wrap, wrap-reverse
• gap — spacing between items without needing margins; works on both axes with row-gap and column-gap

Item properties:

• flex-grow — how much the item grows relative to siblings when there is free space (default 0)
• flex-shrink — how much the item shrinks when space is scarce (default 1)
• flex-basis — the initial size before growing or shrinking (default auto)
• flex — shorthand: flex: 1 equals 1 1 0%; flex: auto equals 1 1 auto
• align-self — overrides align-items for one specific item
• order — changes visual position without altering the DOM order

Understanding flex: 1 vs flex: auto: flex: 1 sets flex-basis: 0, so all items start from zero and grow equally, distributing space evenly regardless of content size. flex: auto sets flex-basis: auto, so items first take their natural width and then grow/shrink proportionally. This difference matters when items have different content sizes.

Common gotchas interviewers probe:

• align-items vs justify-content swap roles when flex-direction: column — the axis they control is the same (main vs cross) but the visual direction changes. Many candidates get confused.
• min-width: 0 on flex items is often required to allow text to truncate or images to shrink below their natural size. Flex items default to min-width: auto, which can prevent shrinking.
• order changes visual rendering but not DOM order, affecting tab and reading order for keyboard users and screen readers.
• gap does not add space outside the first and last items — unlike using margins, there is no extra space on the edges.
• flex-basis in percentage is relative to the flex container's main size, not the parent's width.

CSS Grid is a two-dimensional layout system that controls both rows and columns simultaneously. Flexbox is one-dimensional — it handles either a row or a column at a time. This is the core distinction, but the real difference shows up in how each is best applied.

CSS Grid strengths:

• Designed for page-level and component-level two-dimensional layouts
• You define the layout on the container; items fill in automatically or are placed explicitly
• grid-template-areas gives a visual ASCII-art representation of the layout in CSS
• Supports named lines, fr units for proportional tracks, minmax(), repeat(), auto-fill, auto-fit
• Subgrid lets nested grids inherit parent track definitions — essential for aligning card contents across a row
• Precise item placement across multiple rows and columns with grid-column and grid-row

Flexbox strengths:

• Designed for distributing items along one axis with automatic size negotiation
• Items naturally grow and shrink based on their content and the flex shorthand values
• Better when the number of items is unknown or dynamic and you want them to wrap naturally
• Simpler for navigation bars, toolbars, button groups, and centering single items

When to use which:

• Use Grid when the layout drives the placement of content — page scaffolding, card grids, form layouts, magazine layouts.
• Use Flexbox when the content drives the size of the layout — navigation links that distribute space between them, a row of buttons, a list of tags.
• They compose well: a Grid can contain Flex containers as items, and vice versa.

Key syntax comparison:

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Flexbox */
.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.flex > * { flex: 1 1 200px; }

The flexbox version creates a fluid, wrapping layout where each item is at least 200px wide. The grid version creates exactly three equal columns regardless of content.

Common interview follow-ups:

• Can you make a responsive grid without media queries? Yes: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) creates as many columns as fit, collapsing automatically as the viewport shrinks.
• Does gap work in flexbox? Yes — gap is fully supported in flexbox (not just grid) since 2021.
• What is subgrid? A grid item with grid-template-columns: subgrid inherits the parent's column tracks, allowing its children to align on the parent grid — critical for consistent card layouts.

CSS positioning removes elements from or adjusts them within the normal document flow using the position property combined with offset properties (top, right, bottom, left).

The five position values:

static — default. Element renders in normal flow. Offset properties are ignored. z-index has no effect.

relative — element stays in normal flow and reserves its original space. Offsets move it visually from its normal position without affecting surrounding elements. Creates a containing block for absolute children.

absolute — element is removed from normal flow; surrounding elements behave as if it does not exist. Positioned relative to its nearest non-static ancestor (the containing block). If no such ancestor exists, it is positioned relative to the initial containing block (essentially the `` element).

fixed — like absolute but always relative to the viewport. Does not scroll with the page. Broken by ancestor transform, filter, perspective, or will-change: transform — this is a common bug in production UIs (e.g., a fixed modal behind a transformed hero section).

sticky — hybrid of relative and fixed. Behaves as relative until a scroll threshold is crossed, then acts fixed within its scroll container. Requires at least one offset property (top, bottom, etc.) to know when to stick. Silently fails if an ancestor has overflow: hidden, overflow: auto, or overflow: scroll.

Containing block: The containing block determines the reference for percentage-based widths/heights and for absolute/fixed positioning offsets. For absolute elements, it is the nearest ancestor with position other than static. For fixed, it is normally the viewport, unless a CSS transform or filter on an ancestor creates a new containing block.

Stacking context: Positioned elements with z-index other than auto create a stacking context. Elements within a stacking context are stacked relative to each other before being compared to sibling stacking contexts. Other properties that create stacking contexts include: opacity < 1, transform, filter, will-change, isolation: isolate, mix-blend-mode. This is why z-index: 9999 sometimes does not bring an element to the front — it is trapped inside a lower stacking context.

inset shorthand: inset: 0 is modern shorthand for top: 0; right: 0; bottom: 0; left: 0. Commonly used with position: absolute and margin: auto for centering, or to fill a container completely.

Typical use cases:

• relative + absolute — tooltip, dropdown, badge overlay positioned relative to a parent card
• fixed — sticky header/nav, modal overlay, floating action button
• sticky — section headers that stick as you scroll a list, column headers in a table

The display property determines how an element participates in the layout flow. The three most commonly compared values are block, inline, and inline-block.

block:

• Starts on a new line, pushing subsequent content below
• Stretches to fill the full width of its containing block by default
• Respects width, height, margin (all four sides), and padding (all four sides)
• Vertical margins between adjacent block elements collapse
• Examples: <div>, <p>, </p> <h1>–<h6>, <ul>, ,

inline:

• Does not start on a new line; flows with surrounding text
• Width and height are determined by content — setting width or height has no effect
• Horizontal margin and padding apply and push content left/right, but vertical margin is ignored. Vertical padding applies visually but does not affect line box height or push surrounding block elements.
• Inline elements have a baseline and respond to vertical-align
• Examples: <span>, <a>, <strong>, <em>, <code>

inline-block:

• Flows inline (does not break to a new line) like inline
• Respects width, height, and all four sides of margin and padding, like block
• Useful for buttons, icons, or any inline element that needs explicit sizing
• Historically used for horizontal navigation and multi-column layouts before flexbox and grid; now largely superseded for layout purposes
• Examples by default: <img>, ,, ``

Practical comparison:

Common interview gotchas:

• Inline elements have whitespace sensitivity — gaps appear between adjacent inline-block or inline elements due to HTML whitespace between tags. Flexbox and grid eliminate this problem.
• Vertical padding on inline elements overlaps surrounding lines rather than pushing them apart.
• <img> is inline by default but behaves like inline-block because it is a replaced element — it has an intrinsic size and accepts width/height. This is also why inline images leave a small gap at the bottom (the baseline descender); setting display: block or vertical-align: bottom on images is a common fix.
• In 2026, the two-value syntax (display: block flow, display: inline flow, display: inline flow-root) formalizes what was always happening, with inline-block mapping to display: inline flow-root.