display: contents

display: contents makes an element generate no box: it disappears from the layout and its children behave as direct children of its parent.

It is useful when a wrapper in the HTML stops its children from taking part in the container’s flex or grid.
The element loses its background, border, padding and size, because it no longer has a box.
Use it carefully on buttons, links or lists: some browsers have lost their meaning for screen readers.

Example

The container is a 3-column grid and children 2 and 3 sit inside a wrapper with the content class. With block the wrapper takes a single cell; with contents it disappears and its children take their own cells.

Select display:

blockcontents

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="content">
    <div class="child">2</div>
    <div class="child">3</div>
  </div>
  <div class="child">4</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="content">
    <div class="child">2</div>
    <div class="child">3</div>
  </div>
  <div class="child">4</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.5rem;
}

.content {
  border: 2px dashed #2b7de0;
  display: block;
  padding: 0.5rem;
}

.content > * {
  background: #d9d2f5;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.5rem;
}

.content {
  border: 2px dashed #2b7de0;
  display: block;
  padding: 0.5rem;
}

.content > * {
  background: #d9d2f5;
}

.child {
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.