There is a code:

<div class="container"> <li class="block2"></li> <ul class="posts first"> <li class="block"></li> <li class="block"></li> <li class="block"></li> <li class="block"></li> <li class="block"></li> <li class="block"></li> <li class="block"></li> <li class="block"></li> <li class="block"></li> </ul> <ul class="posts second"> <li class="block"></li> <li class="block"></li> <li class="block"></li> <li class="block"></li> <li class="block"></li> <li class="block"></li> <li class="block"></li> <li class="block"></li>

And css:

  container{ width:940px; margin: 0 auto; padding:40px; background:grey; } .container:after { content: ""; display: table; clear: both; } .block{ float:left; border:1px solid #ccc; width:216px; height:186px; margin: 0 0 20px 22px; list-style: none; } .block2{ float:right; border:1px solid #fff; clear:both; width:217px; height:603px; list-style:none; } .posts{ margin: 0; padding: 0; } .first .block:nth-child(3n+1){ margin-left:0px; clear:left; } .second .block:nth-child(4n+1){ margin-left:0px; clear:left; }

With a browser resolution of 100%, everything looks right, but if you start changing the window resolution to 25%, then the whole grid collapses, tell me how you can fix it so that the grid is as flat as at 100% resolution The code on the feed is: https: / /jsfiddle.net/92j5yr6c/1/

    3 answers 3

    You have removed the left indent to each of the first three elements, and when you narrow it, your 3n + 1 is no longer rolling. Either remove the left indent from everyone, or put or solve a problem with the help of media salaries, but this is an adaptive layout. Then it will surely work exactly the way you want it. Here, briefly:

     @media (max-width: 950px){ .block:nth-child(2n+1){ margin-left:0px!important; clear:left!important; } .block:nth-child(3n+1){ margin-left:0px!!important; clear:left!important; } } @media (max-width: 709px){ .block{ margin-left:0px!important; clear:left!important; } }

    https://jsfiddle.net/92j5yr6c/6/ everything works exactly on my screen

      Somehow here with the layout you have twisted. Try this option :

       .posts { display: table; } .block { display: table-cell; float:left; border:1px solid #ccc; width:216px; height:186px; margin: 0 0 20px 22px; list-style: none; }

        You can fix using @media requests for styles : nth-child , changing 3n + 1 to 2n + 1 , and adding .first for margin.

        Example:

         .container{ width:940px; margin: 0 auto; padding:40px; background:grey; } .container:after { content: ""; display: table; clear: both; } .block{ float:left; border:1px solid #ccc; width:216px; height:186px; margin: 0 0 20px 22px; list-style: none; } .block2{ float:right; border:1px solid #fff; clear:both; width:217px; height:603px; list-style:none; } .posts{ margin-right: 0; padding: 0; } .first{ margin-right: 220px; } @media (min-width: 920px){ .first .block:nth-child(3n+1){ margin-left:0px; clear:left; } .second .block:nth-child(4n+1){ margin-left:0px; clear:left; } } @media (max-width: 919px){ first .block:nth-child(2n+1){ margin-left:0px; clear:left; } .second .block:nth-child(3n+1){ margin-left:0px; clear:left; } }