Real-world mechanisms, state management, edge cases, performance trade-offs, and practical coding.
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.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)).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.overflow: hidden, auto, or scroll (other than visible).display: flow-root (the modern explicit way to create BFC).float: left/right).absolute or fixed.width: calc(100% - 40px)).+) 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.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.
One-time settlement () · Lifetime access · Zero subscription