Responsive Gitter aus Kreisen

Question

Ich erstelle ein Raster mit zwei verschiedenen Größen von Kreisen und ich habe ein Problem beim Erstellen einer neuen Reihe von Kreisen, ohne dass eine Lücke (in meinem Code) Ich versuche, es zu bekommen zu ähnlich aussehen, dies zu:

Hier ist mein Code:

ul { 
 
width:97%; 
 
height:100%; 
 

 
} 
 

 
li.small { 
 
float: left; 
 
margin: 12px; 
 
overflow: hidden; 
 
width:200px; 
 
height:200px; 
 
background-color:palegreen; 
 
border-radius: 50% 
 
} 
 

 
li.big { 
 
float: left; 
 
margin: 10px; 
 
overflow: hidden; 
 
width:460px; 
 
height:460px; 
 
background-color:black; 
 
border-radius: 50% 
 
}

 <ul> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="big"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
     
 

 
</ul>

ich verstehe, dass es jetzt etwas reagiert, wie es zusammenbricht, bu t Ich möchte, dass es auf nur 2 Spalten zusammenfällt.

Vielen Dank im Voraus an jeden, der bereit ist zu helfen!

Answer 1

Sie können einen Versuch auf die neue CSS Rasteranzeige geben: https://css-tricks.com/snippets/css/complete-guide-grid/

Beispiel unten oder ein codepen to play with.

ul { 
 
padding:0; 
 
margin:0; 
 
display:grid; 
 
grid-template-rows: repeat(auto-fill, 220px); 
 
grid-template-columns: repeat(auto-fill, 220px); 
 
grid-gap:0px; 
 
} 
 

 
li.small { 
 
width:200px; 
 
height:200px; 
 
background-color:palegreen; 
 
border-radius: 50%; 
 
grid-row:auto/span 1; 
 
grid-column:auto/span 1; 
 
margin:10px 0; 
 
} 
 

 
li.big { 
 
margin:0; 
 
width:400px; 
 
height:400px; 
 
background-color:black; 
 
border-radius: 50%; 
 
grid-row:auto/span 2; 
 
grid-column: auto/span 2 
 
} 
 
li { 
 
display:block; 
 
padding:0; 
 
margin:0; 
 
align-self:center; 
 
justify-self: center; 
 
}

<ul> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="big"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="big"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="big"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
     
 

 
</ul>

oder einen Blick auf das Mauerwerk javascript Raster-Layout-Bibliothek https://masonry.desandro.com/