CSS - остановка макета от изменения

Question

У меня есть сетка изображений, которые генерируются на экране. Количество изображений в строке на сетке зависит от размера страницы. Все работает хорошо, пока страница не становится слишком маленькой, затем макет уходит.

This is the proper layout.

This is what happens when the page gets too small.

CSS:

.g { 
     padding: 0.25em; 
      overflow: hidden; 
     } 
     .g li { 
      float: left; 
      width: 50%; 
      padding: 10px; 
      padding-left: 10px; 
      border: 2px solid black; 
      background: #fff; 
      background-repeat: repeat; 
      background-size: cover; 
     } 
     .g img { 
     max-width: 100% 
      display: block; 
     } 

     @media screen and (min-width: 55em) { 
      .g li { 
       width: 25%; 
      } 
      .g li:nth-child(4n+1) { 
       clear: left; 
      } 
      .g li:nth-child(3n+1) { 
       clear: none; 
      } 
     } 
     @media screen and (min-width: 72em) { 
      .g li { 
       width: 20%; 
      } 
      .g li:nth-child(5n+1) { 
       clear: left; 
      } 
      .g li:nth-child(4n+1) { 
       clear: none; 
      } 
     } 

Могу ли я сделать это так, если страница получила небольшой, чем 4х4 сетки, что сетка по-прежнему остался, а не изменения?

Answer 1

Изменение CSS для:

.g { 
     padding: 0.25em; 
      overflow: hidden; 
     } 
     .g li { 
      float: left; 
      width: 20%; 
      padding: 10px; 
      padding-left: 10px; 
      border: 2px solid black; 
      background: #fff; 
      background-repeat: repeat; 
      background-size: cover; 
     } 
     .g img { 
     max-width: 100% 
      display: block; 
     } 
      .g li:nth-child(5n+1) { 
       clear: left; 
      } 
      .g li:nth-child(4n+1) { 
       clear: none; 
      } 

EDIT:

Просто удалите первую обертку СМИ.

.g { 
     padding: 0.25em; 
      overflow: hidden; 
     } 
     .g li { 
      float: left; 
      width: 50%; 
      padding: 10px; 
      padding-left: 10px; 
      border: 2px solid black; 
      background: #fff; 
      background-repeat: repeat; 
      background-size: cover; 
     } 
     .g img { 
     max-width: 100% 
      display: block; 
     } 

      .g li { 
       width: 25%; 
      } 
      .g li:nth-child(4n+1) { 
       clear: left; 
      } 
      .g li:nth-child(3n+1) { 
       clear: none; 
      } 
     @media screen and (min-width: 72em) { 
      .g li { 
       width: 20%; 
      } 
      .g li:nth-child(5n+1) { 
       clear: left; 
      } 
      .g li:nth-child(4n+1) { 
       clear: none; 
      } 
     }