由圆圈组成的响应式网格

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 网格显示：https://css-tricks.com/snippets/css/complete-guide-grid/

下面的示例或 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>

或者看看masonryjavascript网格布局库https://masonry.desandro.com/

由圆圈组成的响应式网格

Responsive grid made out of circles

html

css

grid

responsive