Responsive Gitter mit horizontalen und vertikalen Elementen

Question

Hier ist ein Beispiel dafür, was ich versuche zu tun: https://i.imgur.com/Jhj3Xn2.png

Ich bin nicht wirklich sicher, ob dies möglich ist, vermute ich, es kann nicht sein, oder dass eine Javascript-Bibliothek möglicherweise benötigt, um dies zu erreichen.

Was ich versuche zu tun, ist eine reaktionsfähige Galerie aufzubauen, die sowohl vertikale als auch horizontale Elemente hat, die sich gegenseitig tetrisieren. Was ich entdeckt habe, ist, dass Sie zwar die Elemente auf einer bestimmten Bildschirmgröße gut aussehen lassen können, aber sobald Sie die Breite des Darstellungsbereichs ändern, werden im Layout "Löcher" angezeigt.

Kann jemand an eine Möglichkeit denken, den Inhalt so auf einer Seite fließen zu lassen, dass er sowohl reaktionsschnell als auch lückenlos ist? Ich benutze Bootstrap 4 und ich bin glücklich zu verwenden, was JS oder CSS benötigt, um dies zu erreichen.

Answer 1

ist die Struktur ähnlich wie bei Ihnen, es ist ein bisschen chaotisch als Klassen verwenden musste und ja ist es Bootstrap-Klasse (col-12 < - dies col-xs-12 ähnlich ist, die für < 576px ist) hinzufügen können

Sie Ihre

erforderlich Größe und Struktur entsprechend.

Lassen Sie mich wissen, wenn Sie etwas nicht verstehen.

.outer { 
 
    width: 500px; 
 
    height: 500px; 
 
    margin: auto; 
 
    margin-top: 20px; 
 
} 
 

 
.top { 
 
    height: 250px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container outer"> 
 
    <div class="row top"> 
 
    <div class="col-3" style="border:1px solid black;"> 
 
     <div class="row"> 
 
     <div class="col-12" style="border:1px solid black; height:125px;"> 
 
     </div> 
 
     <div class="col-12" style="border:1px solid black; height:125px;"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="col-6" style="border:1px solid black;"> 
 
     <div class="row"> 
 
     <div class="col-6" style="border:1px solid black; height:125px;"> 
 
     </div> 
 
     <div class="col-6" style="border:1px solid black; height:125px;"> 
 
     </div> 
 
     </div> 
 

 
     <div class="row"> 
 
     <div class="col-12" style="border:1px solid black; height:125px;"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="col-3" style="border:1px solid black;"> 
 
     <div class="row"> 
 
     <div class="col-12" style="border:1px solid black; height:250px;"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row top"> 
 

 
    <div class="col-3" style="border:1px solid black;"> 
 
     <div class="row"> 
 
     <div class="col-12" style="border:1px solid black; height:250px;"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="col-3" style="border:1px solid black;"> 
 
     <div class="row"> 
 
     <div class="col-12" style="border:1px solid black; height:125px;"> 
 
     </div> 
 
     <div class="col-12" style="border:1px solid black; height:125px;"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="col-3" style="border:1px solid black;"> 
 
     <div class="row"> 
 
     <div class="col-12" style="border:1px solid black; height:125px;"> 
 
     </div> 
 
     <div class="col-12" style="border:1px solid black; height:125px;"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-3" style="border:1px solid black;"> 
 
     <div class="row"> 
 
     <div class="col-12" style="border:1px solid black; height:125px;"> 
 
     </div> 
 
     <div class="col-12" style="border:1px solid black; height:125px;"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 

 
    </div> 
 
</div>