Explain the wtf

display: contents removes the box

HardThe famous WTFsW17

Three chips, a three-column grid, and only two columns are being used. Two of the chips are stacked on top of each other in column one. They are wrapped in a div that exists so a script can find them.

The bar is grid-template-columns: repeat(3, 1fr). There are three chips. They should be three equal columns, 193.33px each, 20px apart, in a single 40px row. Two of them are inside .group — a wrapper a script needs, so it cannot be deleted from the markup. The grid can only place its direct children, so it places the wrapper, and the two chips inside it share the wrapper's single track. Get all three chips onto the grid, and keep it correct when the bar is a different width.

Hint

The grid lays out its direct children. Can an element stay in the DOM and stop being one of them?

Live preview800×600

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="bar"><div class="group"><span class="chip c1"></span><span class="chip c2"></span></div><span class="chip c3"></span></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; }
.bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 620px; background: #16161d; }
.chip { display: block; height: 40px; background: #ffd166; }
.c2 { background: #b5e48c; }
.c3 { background: #7bdff2; }