mediumConceptEntryMidSenior
How do you decide between flexbox and grid, and why does z-index so often not do what you expect?
5 min readUpdated 2026-08-15
Answer
Short answer
Flexbox distributes items along one axis and lets content decide the sizes; grid defines tracks up front and places items into them, aligning in both axes.z-index looks broken because it only orders siblings inside one stacking context, and ordinary properties like transform and opacity create new ones.
Was this answer helpful?
Likely follow-ups
- A row of flex items with long unbroken text overflows its container instead of shrinking. What is happening and what do you change?
- Build a card list that fits as many 16rem columns as the viewport allows, with no media queries.
- A dropdown with a z-index of 9999 renders behind a card with a z-index of 2. Walk me through how you would find the cause.
- When would you use isolation to scope a subtree instead of adjusting z-index values?
Related questions
- A flex item with a long URL in it pushes past its container instead of shrinking. Why does flex-shrink not save you?mediumAlso on flexbox and css-grid4 min
- A third-party script in the head delays your first paint by a second. What do async, defer and type="module" each change about parsing and execution order?mediumSame kind of round: concept5 min
- You need a random number from 1 to 6 and you wrote rand() % 6. What is wrong with that, and when does it stop being merely wrong and become a vulnerability?mediumSame kind of round: concept4 min
- Every number in the array appears three times except one. Find the single number in O(1) extra space, and make sure it works for negatives.mediumSame kind of round: concept5 min