.wrapper { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 10px; grid-auto-flow: dense; } .wrapper li.landscape { grid-column-end: span 2; }
<ul class="wrapper"> <li><img src="portrait.jpg" alt="placeholder"></li> <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li> <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li> <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li> <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li> <li><img src="portrait.jpg" alt="placeholder"></li> <li><img src="portrait.jpg" alt="placeholder"></li> <li><img src="portrait.jpg" alt="placeholder"></li> </ul>
