What are the differences between display: block, inline, inline-block, flex, and grid?
❓ Interview Prompt: Compare the five main CSS display values and when to use each one.
The display property defines how an element generates boxes and participates in layout:
| Display Value | New Line? | Width/Height? | Use Case |
| :--- | :--- | :--- | :--- |
| block | Yes, starts on new line | Accepts width/height | Divs, paragraphs, sections |
| inline | No, flows with text | Ignores width/height | Spans, links, emphasis |
| inline-block | No, flows with text | Accepts width/height | Buttons, badges, tags |
| flex | Yes (container) | Children flex | Navbars, card rows, toolbars |
| grid | Yes (container) | Children placed in grid cells | Page layouts, dashboards, galleries |
Code Implementation Example
/* Navbar using Flexbox */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
/* Dashboard using Grid */
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}Use flex for one-dimensional alignment (row or column) and grid for two-dimensional page layouts.