Выбор адаптивной/флюидной сетки/шаблона

Question

Эй, поэтому я искал в Интернете некоторые примеры жидкостных сеток и чувствительных рамок сетки (я считаю, что ищу жидкость, но все еще не уверен). И интересно, может ли кто-нибудь здесь помочь мне указать на какой-то полезный код, поскольку я не совсем уверен, как реализовать с чистым css (возможно, javascript/jquery необходим) anyways вот что я ищу:

большие экраны выглядеть следующим образом

немного меньше экрана

меньший экран еще

(в изображениях каждого блок появляется немного больше, поскольку размеры экрана уменьшить это не то, что я действительно ищу для каждого экрана должен быть таким же размером ... если вы видели netflixs жанровых страниц это точно, что я ищу)

Мне не нужен образец отполированного кода, но как бы я это делал (имея 15 медиа-запросов, чтобы просто обрабатывать сетку и перемещать элемент вокруг, не похоже ответ или не так ли?) Было бы очень полезно понять любое понимание того, как я могу это сделать, или рамки или демонстрацию, где это выполняется.

Answer 1

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

Вы можете выбрать обычную сетку, но зачем импортировать 1000 строк кода для чего-то, что можно сделать в 1 строка.

Практически одна строка кода (если написано на одной линии, что):

ul li { 
    display: inline-block; 
    *display: inline; 
    zoom:1; 
    vertical-align: top; 
    width: 50px; 
    height: 50px; 
    margin: 0 10px 10px 0; 
    background-color: #000; 
} 

Demo