Estaba tratando de crear una cuadrícula para mi sitio web que llenara todo el documento (sin desbordamiento/desplazamiento). ¿Cómo lo haría para que se pudieran agregar elementos si se cambia el tamaño de la pantalla? He intentado usar una cuadrícula (que ayuda con el relleno vertical), pero no he descubierto cómo llenarla horizontalmente. ¿Para que el DOM esté siempre lleno de elementos?

Aquí hay imágenes de lo que quiero decir Imagen original

Imagen con tamaño de ventana aumentado

Lo que tengo hasta ahora:

 <div class="photo-grid" style="display: grid;"> <div class="card card-tall card-wide">1</div> <div class="card card-tall">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> <div class="card">6</div> <div class="card card-wide">7</div> <div class="card">8</div> <div class="card">9</div> <div class="card">10</div> <div class="card">11</div> <div class="card">12</div> </div>

 @import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap'); .photo-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 240px; } /* Medium screens */ @media screen and (min-width: 600px) { .card-tall { grid-row: span 2 / auto; } .card-wide { grid-column: span 2 / auto; } } .card { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #353535; font-size: 3rem; color: #fff; box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem; height: 100%; width: 100%; border-radius: 4px; transition: all 500ms; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; }

¿Cómo haría para tratar de resolver este problema?