Skip to main content
CSS features/ Properties

Properties

display practice questions

Controls the outer and inner display type of an element, including block, inline, flex, grid, contents, and none.

Baseline widely available

Supported across the major browser engines for a meaningful period.

CSS-TricksMDN

Example

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Visual demo

See display in context

Grid preview

header
nav
main
card
card
aside

Practice

20 quick questions

Choose one answer

Question 1

A card gallery already has grid-template-columns: repeat(3, 1fr). Which declaration actually turns .cards into a grid container?

Question 2

Given .toolbar { display: flex; }, which elements become flex items?

Question 3

A compact group of action buttons should use Flexbox internally but sit within a sentence without occupying the full line. Which declaration fits?

Question 4

A <span> badge must remain in the text line while respecting an explicit width and height. Which display value is the usual choice?

Question 5

A dashboard needs intentional column and row tracks so cards can align in two dimensions. Which starting point best matches that requirement?

Question 6

A navigation bar mainly needs its links arranged and aligned along one row, with a controllable gap. Which starting point is most direct?

Question 7

What does display: inline grid tell the browser?

Question 8

When only display: block is declared, which inner layout type is implied?

Question 9

A profile card contains a floated avatar, but the card background and border do not wrap around the float. Which declaration creates a clean float-containing layout without a clearfix pseudo-element?

Question 10

A closed menu should take up no layout space and should not leave its controls keyboard-focusable or announced. Which declaration matches that requirement?

Question 11

A placeholder must keep its layout space while hidden and must not remain keyboard-focusable. Which choice best matches that behavior?

Question 12

A .group wrapper prevents its card children from participating directly in the parent grid. Which declaration can remove only the wrapper's box while keeping its children in the layout?

Question 13

Why do a wrapper's background, border, and padding stop painting after the wrapper receives display: contents?

Question 14

A custom element should generate a list marker that can be styled with ::marker. Which declaration provides that list-item behavior?

Question 15

If a navigation <div> receives display: list-item, what happens to its document semantics?

Question 16

A parent uses display: grid, but a child has no display declaration of its own. Which statement is accurate?

Question 17

Which experimental display value creates the CSS Grid Level 3 masonry-style layout that places each new item into the lane with the most available room?

Question 18

Which declaration order supplies regular Grid as a fallback and upgrades to Grid Lanes only in browsers that support it?

Question 19

Why should display: contents be tested carefully before applying it to a meaningful interactive or semantic wrapper?

Question 20

Why does switching directly between display: none and a visible display value not create a smooth fade by itself?

Common mistakes

  • Assuming display only controls whether an element is block or inline.
  • Forgetting that display: none removes the element from layout and accessibility trees in most cases.
  • Mixing up outer display behavior with the inner layout mode such as flex or grid.