The CSS display property is essential for building responsive layouts. By combining different display values with media queries, you can create flexible, adaptive designs.

Common Approaches

1
display: flex – Use Flexbox for one-dimensional layouts (row or column). Flex items can wrap with flex-wrap, and alignment can be controlled with justify-content and align-items. Perfect for responsive navbars, card rows, or grids that adjust on smaller screens.
2
display: grid – Use Grid for two-dimensional layouts. You can define explicit columns and rows with grid-template-columns and grid-template-rows, and adjust them with media queries to make layouts adapt at different breakpoints.
3
display: inline, inline-block, inline-flex, inline-grid – These allow elements to flow inline with text or other inline elements, useful for smaller components or inline menus.
4
display: contents – Remove unnecessary wrapper boxes while keeping children in the layout. Can simplify responsive designs but use carefully for accessibility.

Example: Responsive Flex Layout

In this example, the container uses display: flex with flex-wrap: wrap, so child elements automatically wrap to the next line when the viewport is too narrow, creating a responsive layout without changing the HTML.

Best Practices

1
Use flex or grid for main layout sections that need to adjust across screen sizes.
2
Combine display properties with media queries to change layout direction or column count responsively.
3
Use inline-* values for small components that need to flow with text or inline content.
4
Test layouts at multiple viewport sizes to ensure proper wrapping and alignment.

Difficulty: 6/10

Topics: Flexbox & Grid, Responsive Design, CSS Layout Architecture

Scenario Questions

0-2 years experience

1
Imagine you have a row of three product cards. On mobile, we want them stacked vertically, but on desktop, they should sit side-by-side and share the space equally. How would you configure the display property and its companion properties to achieve this?
2
We have a navigation bar where the logo is on the left and three links are on the right. When you apply display: flex to the container, everything bunches up on the left. How do you push those links to the far right, and what happens to that layout if the screen gets too narrow?

2-5 years experience

1
We're building a dashboard widget grid. The designer wants a multi-column layout that automatically wraps and fits as many columns as possible without using hardcoded media queries. How would you use CSS Grid's display properties to build this, and how do you prevent empty space when there are only one or two items?
2
A developer on your team used display: flex for a complex page layout, but they are struggling because some flex items are shrinking past their content size and breaking the text alignment on smaller screens. How would you debug this, and how do you decide when to switch a container from display: flex to display: grid?

5-8 years experience

1
We are designing a highly reusable, responsive 'Card' component for our enterprise design system. It needs to support internal media-query-like behavior (changing from horizontal to vertical layout) based on its container's width rather than the viewport. How would you approach this using modern CSS display properties, and what are the performance implications of container queries versus traditional media queries?
2
Our legacy application uses a mix of display: inline-block and floats for its grid system, causing rendering bugs and layout shifts on slow mobile connections. If you were tasked with refactoring this core layout engine to Flexbox or Grid, how would you plan the migration to ensure zero visual regression and maintain backward compatibility for older browsers?

8+ years experience

1
Our organization has 50+ micro-frontends managed by different teams, and we're seeing massive layout thrashing and inconsistent responsive behaviors because teams are nesting Flexbox and Grid layouts arbitrarily. How would you design a global layout orchestration strategy or CSS architecture to standardize responsive behavior across these teams without micro-managing their styling?
2
We are migrating our core web application to support strict accessibility (WCAG 2.1 AA) and internationalization (RTL languages). How does your choice of CSS display modes (like Flexbox vs Grid) impact DOM order versus visual order, and how would you establish engineering guidelines to prevent teams from breaking screen-reader navigation while building responsive layouts?

Follow-up Questions

❓How does 'display: contents' affect the accessibility tree and flex/grid item relationships?
❓What are the performance differences between rendering a massive list with Flexbox versus CSS Grid?
❓How do you handle browser fallback support for modern CSS Grid features in a legacy enterprise app?

How do you use display to build responsive layouts?

Building Responsive Layouts Using CSS Display