In modern web development, every frontend engineer is familiar with CSS and its display property. Fewer, however, know about the lesser-used but very useful contents value. This value can play a key role in building responsive layouts, especially when you need to restructure DOM elements in response to viewport changes. Below we examine its use with a practical, code-driven example.
Example: Responsive Product Card
Suppose we have the following HTML structure for a product card:
<div class="product-card">
<img src="product.jpg" alt="Product Image">
<h2>Product Name</h2>
<div class="product-info">
<span class="quantity">Only 3 left</span>
<button>Buy Now</button>
</div>
</div>On desktop screens this order is appropriate, but on mobile we want to move the stock quantity to the very top of the card.
Traditional Approach: Flexbox or Grid
We could use CSS Grid to reorganize elements:
.product-card {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.product-info {
display: flex;
justify-content: space-between;
}And apply order to the quantity element:
@media (max-width: 600px) {
.quantity {
order: -1;
}
}However, because .quantity is inside .product-info, changing its order only affects its position within that container.
Solution with display: contents
Apply display: contents to .product-info to alter how the DOM structure is treated for layout:
@media (max-width: 600px) {
.product-info {
display: contents;
}
}Now .quantity and the button are treated as direct children of .product-card, and we can control their ordering at the card level:
@media (max-width: 600px) {
.quantity {
order: -1; /* Now behaves as intended */
}
}Practical Constraints
Keep in mind that display: contents can affect accessibility: some screen readers may ignore structural changes, which can impact the perceived document hierarchy. Additionally, when using display: contents, styles applied to the parent element no longer apply to its contents (e.g., background, padding, and borders on the parent will not affect the children).
The display: contents value opens up new possibilities for frontend developers, enabling more flexible and responsive layouts without heavy changes to the HTML structure. Use it judiciously and verify accessibility to ensure a robust user experience.
