Смысл адаптивного дизайна - в медиа-запросах
Поскольку устройств десятки - писать для каждого класса адаптивный дизайн - это пустая работа, потому что стили будут в большинстве своем одинаковые.
В связи с этим придумали - колоночный дизайн, который заранее задает стили для т.н. колонок, которые выстраиваются в строку - если место есть, и в столбик, если места нет.
Это работает либо инлайн-блоками, либо флоатами.
Если инлайн-блоки - нужно родительскому элементу постоянно занулять размер шрифта. А в колонке возвращать его обратно. Плюсы - можно выровнять колонки по центру если нужно (редко нужно на самом деле, чаще создают второй контейнер с отступами).
Если флоатами - вешать на родительский элемент clearfix. Ну и разумеется выравнивание по центру
САМИХ КОЛОНОК будет недоступно. Кроме того - работа с float: left; весьма специфична по наследованию максимальной высоты, например, когда вы хотите сделать форму для ввода в которой в одной колонке находится лейбл, а в другой поле, при этом форма должна выглядеть ровно - вы задаете строке min-height: 30px например, а потом попытка сеткой унаследовать этот min-height: сломает вашу сетку к чертям.
Короче, используйте inline-block;
Смысл сетки в целом вот такой: ты задаешь максимальное количество колонок в строке, а потом размер конкретной колонки относительно максимального для конкретного устройства. Все классы заранее прописываются в медиазапросах, проще всего для этого использовать какой-нибудь SASS или Stylus (главное чтобы были циклы)
>> БЭМ
.grid.grid_size_12
.grid_col.grid__col_size_2.grid__col_size_4mobile
Вышеуказанный код работает примерно так - по-умолчанию в строке помещается 12х, внутри находится колонка которая по умолчанию занимает 2/12 = 1/6 экрана, на мобильном 4/12 - 1/3 экрана по ширине.
Вы можете использовать для этого Бутстрап, но сломаете ногу о то, что бустрап очень любит создавать классы без префиксов, которые часто вы можете использовать в своих проектах - начнется ерунда, что класс уже обьявлен и "давай придумывай другое имя", плюс раньше бутстрап грешил переписыванием глобальных стилей для заголовков, кнопок, абзацев и тд., сейчас не знаю.
Напишите свою сетку, это не так сложно, а потом вы сможете задавать отступы колонкам примерно в таком виде
.grid {
display: block;
font-size: 0;
box-sizing: border-box;
min-height: inherit;
max-height: inherit;
height: 100%;
}
/* здесь не нужна вложенность, на класс будут навешиваться другие классы */
/* мы указываем "начинается с класса", чтобы каждый раз не писать .grid__col.grid__col_size_2 а просто писать grid__col2 например */
[class^="grid__col"] {
display: inline-block;
vertical-align: top;
font-size: 1rem; /* постоянно следите за этим размером шрифта, он еще не один раз напомнит о себе */
box-sizing: inherit;
height: 100%;
min-height: inherit;
max-height: inherit;
}
/* циклы */
.grid_col_size_12 .grid__col_size_12 {
width: 100%;
}
.grid_col_size_12 .grid__col_size_6 {
width: 50%;
}
/* и т.д. */
.grid_project_foo {
margin: 0 -8px -16px;
}
.grid_project_foo .grid__col {
padding: 0 8px;
margin-bottom: 16px;
}
Что обеспечит вам отступ между колонками в 16 пикселов по горизонтали без отступов крайних колонок, а также отступ после того как они соберутся в столбик по вертикали тоже 16 пикселов, не включая последнюю строку (она будет сожрана отрицательным маргином).
P.S.
Только что проверил колонки с float: left. Их ломает min-height - они перестают влазить по ширине, а если убрать min-height: - не будет работать выравнивание по высоте. А причина в том, что отрицательный маргин ломает все флоаты к чертям. Так что да, единственный нормальный вариант это inline-block.
Если вам
нужно раскрасить колонки - используйте table, table-cell, которое на мобильных устройствах (после перестраивания в столбик) превратится в block, inline-block.
