CODEWITHSUNDEEP
htmlcssgridresponsive
johnstont05
johnstont05

Reputation: 237

Responsive grid made out of circles

I am creating a grid with two different sizes of circles and I am having a problem creating a new row of circles without it leaving a gap (shown in my code) I am trying to get it to look similar to this: enter image description here

Here is my 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>

I understand that it is somewhat responsive now, such as it collapses, but I would like it to collapse to only 2 columns.

Thanks in advance to anyone who is willing to help!

Upvotes: 2

Views: 3167

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106008

You can give a try to the new CSS grid display : https://css-tricks.com/snippets/css/complete-guide-grid/

example below or a 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>

or take a look at the masonry javascript grid layout library https://masonry.desandro.com/

Upvotes: 4

Related Questions