I have a set of children inside a display: grid container - each child is numbered. At the 600px breakpoint, child 4 completely loses composure and deflates to its inner content size. Why doesn't 4 hop on down below 3?
.box { background: yellow; display: flex; justify-content: center; align-items: center; font-size: 48px; font-weight: bold;}.box.md { grid-column: span 2;}.box.lg { grid-column: span 2; grid-row: span 2;}.container { max-width: 1200px; margin: 0 auto; padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: 240px; grid-auto-flow: dense; grid-gap: 8px;}@media (max-width: 920px) { max-width: 800px;}@media (max-width: 600px) { grid-auto-rows: 120px;}<div class="container"><div class="box lg">1</div><div class="box md">2</div><div class="box sm">3</div><div class="box sm">4</div></div>
