CSS: display

The display property decides how an element participates in layout: as a block, inline content, flex container, grid container, or something else.

What you will learn

How block and inline display affect size and line breaks
When to choose Flexbox or Grid for layout
How to avoid hiding content accidentally

Minimal examples

<div class="menu">
  <a href="/">Home</a>
  <a href="/docs">Docs</a>
</div>

.menu {
  display: flex;
  gap: 1rem;
  align-items: center;
}

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

Use display: flex for a one-dimensional row or column, and display: grid when rows and columns both matter. Ordinary block and inline flow is often the simplest choice for text.

Common mistakes

display: none removes the element from layout and accessibility trees; use it only when the content should be unavailable.
Flex properties such as justify-content apply to the flex container, not to each child.
Changing display does not automatically make an element semantically appropriate. Choose HTML elements for meaning first.