Во времена, когда я начала заниматься web-дизайном, была очень популярна сетка Bootstrap. Нас учили вмещать дизайн в контейнер 1170px на 12и колонках.
Сетка Bootstrap
Это было похоже на создание сайта по четкому ГОСТу. Блок не мог начинаться в интервале между колонками (иначе это прибавляло лишний код верстальщику). Каждый раз ты сидишь и вымучиваешь расположение телефона в шапке. Не можешь выбрать ширину карточки товара такую, которую ты хочешь.
С появлением flexbox эти мучения закончились. А с ним и сошла сетка Bootstrap на нет.
Flexbox определяет набор CSS свойств для контейнера: все блоки становятся “резиновым”. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
Сетка 10px или 8px
Есть другой вариант сетка в 10px или 8px т.е. все твои элементы кратны 8 или 10. Будь то высота блока, текста или расстояние между элементами.
Этот подход не для меня, вместо дизайна твой процесс начинает походить на высшую математику, ты постоянно сидишь и высчитываешь.
А теперь эпогея твоего мучения:
Сидишь, вымеряешь каждый пиксель, чтобы все было идеально, потом находишь свой сайт на просторах интернета, а там все не так, интервалы гуляют, как хотят. В этот момент говори себе: дыши, дыши.
Почему так происходит?
Все просто, большинство верстальшиков все делают на глаз, исключение составляет одно слово в ТЗ: пиксельперфект. Но, как ты понимаешь, это стоит денег и не каждый заказчик готов на этом заморачиваться.
Поэтому сиди и тихо плачь, что очередной сайт ты можешь показать только в портфолио, а не в реальной жизни.
Какую сетку выбираю я сейчас?
Ни какую. Я только ставлю направляющие на ширину контента. Иногда контент занимает все поле, это зависит от того, как мы решим с заказчиком и от вида сайта.
Я на Behance | Я на Dribbble
Нужен дизайн сайта или сайт «под ключ»?
Пиши мне: Lizar92@mail.ru