CSS · MEDIUM CODEX
CSS Interview Questions — Medium
Real-world mechanisms, state management, edge cases, performance trade-offs, and practical coding.
50 Theory Questions5 Free Model Answers
THEORY QUESTIONS & SOLUTIONSShowing 5 of 50 questions
Q1Explain the CSS Multi-Column Layout model.
- Purpose: Flows standard text content across multiple vertical columns seamlessly, mimicking newspaper layouts.
- Properties:
column-count: Explicit number of columns to generate.column-width: Ideal/target width of each column.column-gap: Sets the gutter spacing between columns.column-rule: Creates a vertical divider border between columns.
Q2What are the CSS mathematical functions `min()`, `max()`, and `clamp()`?
min(val1, val2): Selects the smallest value. Useful for setting fluid elements that shouldn't overflow screen widths (e.g.,width: min(100%, 800px)).max(val1, val2): Selects the largest value. Ensures elements don't shrink past a set minimum.clamp(min, preferred, max): Locks a value between a hard minimum and maximum limit, scaling smoothly with the middle percentage value (e.g.,font-size: clamp(1rem, 2.5vw, 3rem)).
Q3Contrast alignment properties in Flexbox and CSS Grid.
justify-content: Aligns flex items/grid columns along the main axis (horizontally).align-items: Aligns flex items/grid tracks along the cross axis (vertically) in a single row.align-content: Aligns multiple rows of flex containers/grid rows along the cross axis when there is extra space.justify-items: Grid only. Aligns cell contents horizontally within their individual grid cell area.
Q4What is a Block Formatting Context (BFC), and how is it created?
- Definition: An isolated layout region of a webpage where block boxes are laid out. Margin collapsing only occurs within the same BFC.
- BFC prevents: Collapsing margins with parent elements and floating elements from overflowing their containers.
- Creation methods:
- Setting
overflow: hidden,auto, orscroll(other thanvisible). - Setting
display: flow-root(the modern explicit way to create BFC). - Floating elements (
float: left/right). - Position values
absoluteorfixed. - Flex or Grid items.
- Setting
Q5How does the `calc()` function work in CSS?
- Function: Performs mathematical calculations directly in CSS property values.
- Rules:
- Supports mixed units (e.g.,
width: calc(100% - 40px)). - Operator Spacing: Plus (
+) and minus (-) operators must be surrounded by white spaces (e.g.,calc(100%-40px)is invalid) so the parser doesn't mistake them for negative signs. Multiplication (*) and division (/) do not require spaces.
- Supports mixed units (e.g.,
Unlock the remaining 45 CSS (Medium) questions
You've completed the 5 free sample questions. Get unrestricted lifetime access to every question, model answer, implementation challenge, and all 27+ technologies for a single payment.
₹399 India / $9 International · One-time settlement · Zero subscription