Display

By the end of this lesson, you will be able to choose CSS display values to control whether elements stack, sit side by side, form flexible rows, create grid layouts, or disappear from layout.

What it is

display tells the browser what kind of box an element should generate and how its children should be laid out. Think of it as the element's layout mode. A block element takes full width and starts on a new line. An inline element flows inside text and only takes the width of its content. flex and grid turn an element into a layout container, making its direct children flex items or grid items. none removes the element from the layout entirely.

Related terms include box model, flex container, grid container, inline-level, block-level, and accessibility tree.

Why it matters

• It controls whether components stack vertically or sit side by side.
• It lets you build responsive rows and columns without floats or tables.
• It determines whether width, height, margins, and padding behave predictably.
• It can hide content from layout and screen readers when needed.
• It provides the foundation for alignment tools like gap, justify-content, and align-items.

Syntax or steps

1. Select the element that should control layout.
2. Set display to block, inline, flex, grid, or none.
3. If using flex or grid, style the direct children as items.
4. Add layout properties such as gap, flex-direction, or grid-template-columns.

Example

<div class="row">
  <div class="card">One</div>
  <div class="card">Two</div>
  <div class="card">Three</div>
</div>

<div class="hidden">This is removed from layout.</div>

<style>
.row {
  display: flex;
  gap: 16px;
}

.card {
  flex: 1;
  padding: 12px;
  border: 1px solid #ccc;
}

.hidden {
  display: none;
}
</style>

The .row element becomes a flex container. Its three .card children become flex items and sit side by side. gap: 16px adds space between them. flex: 1 lets each card grow to share available width. The .hidden element is not rendered, so it takes no space and is not announced by assistive technology.

Common mistakes

• Setting width or height on inline elements. Inline elements ignore most box sizing. Use display: inline-block or display: block if you need a sized inline-like element.
• Applying flex properties to the wrong element. display: flex goes on the parent; flex: 1 goes on the child.
• Using display: none when content should remain accessible. If you only want to hide something visually, use a screen-reader-only technique instead.
• Expecting transitions to animate display. display is not smoothly transitioned; animate opacity or visibility instead.

When to use it

Use flex for one-dimensional rows or columns, and grid for two-dimensional layouts. Use none only when the element should be completely absent.

Practice

Guided exercise: Create three div elements inside a parent. Set the parent to display: flex and add gap: 12px. Expected output: three boxes appear side by side with equal spacing.

Challenge: Make the same row wrap on small screens. Hint: add flex-wrap: wrap to the parent and give each child a minimum width such as min-width: 150px.

Quick check

Question: What is the difference between display: none and visibility: hidden?

Answer: display: none removes the element from layout and accessibility tree, while visibility: hidden keeps its space and may still affect layout.

Summary

display is the switch that decides how an element participates in layout. Choose block or inline for basic flow, flex or grid for structured containers, and none when content should disappear.