What’s the difference between justify-content and align-content in Grid?

0-2 years experience

1. 1You have a simple dashboard with a grid container of 3 columns and 2 rows. How would you use justify-content to space the grid tracks horizontally?
2. 2If you set align-content: center on a grid that only has one row, what visual effect will you see and why?
3. 3What happens if you apply both justify-content: space-between and align-content: stretch on the same grid container?

2-5 years experience

1. 1We have a responsive product page where extra vertical space should be distributed evenly between rows on tall screens but collapse on short screens. Which property would you adjust and how?
2. 2A teammate reports that adding justify-content: space-around to a grid didn't change the layout as expected. Walk me through how you would debug this.
3. 3Why might justify-content have no effect when the grid's content already fills all rows?

5-8 years experience

1. 1Design a reusable CSS Grid component library that needs to support both horizontal and vertical alignment of tracks across multiple themes. How would you expose justify-content and align-content options, and what trade‑offs would you consider?
2. 2Our design system currently uses flexbox, but we want to migrate to grid for complex dashboards. What pitfalls around justify-content vs. align-content should we watch for at scale?
3. 3When rendering a large data table with virtual scrolling, how could misuse of align-content affect visual glitches or perceived performance?

8+ years experience

1. 1At the organization level we need to standardize layout conventions across dozens of micro‑frontends. How would you define guidelines for when to use justify-content versus align-content in grid, and how would you enforce consistency?
2. 2During a migration from a legacy CSS framework to a modern CSS‑in‑JS solution, what architectural considerations arise around grid alignment properties, especially regarding theming and RTL support?
3. 3If we must support both web and native (React Native) platforms, how do differences in grid alignment semantics influence our cross‑platform component design?