响应式网格由圆圈组成

Question

我正在创建一个包含两个不同大小的圆圈的网格，但是在创建一个新的圆形行时出现问题而没有留下间隙（在我的代码中显示） 我试图让它看起来与此类似：

这是我的代码：

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>

我知道它现在有点响应，例如它崩溃了，但我希望它只能折叠到2列。

提前感谢愿意提供帮助的任何人！

Answer 1

您可以尝试新的CSS网格显示：complex types

下面的示例或https://css-tricks.com/snippets/css/complete-guide-grid/。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或者看一下砌体javascript网格布局库codepen to play with