Как правильно разметить сетку сайта-приложения?

Question

[gleendo]

Хочу попробывать сверстать макет.
Вот этот https://cloud.mail.ru/public/GBTe/f18idVXkX


Вообще не пойму как и с чего начать. Как правильно разметить сетку этого макета?
общая ширина 1600px
Как правильней разметить?
Набросайте в общих словах.

Я знаю как разметить фиксированно, просто указать каждый столбец в px, но думаю это не совсем правильно.
Какие блоки из этих делать резиновыми и как? Как вообще разоюраться с размерами. Вообще не понимаю

Comments

[Anton Filippov]

скинь скрин, кто будет псд качать твой

[artem_music]

+1 к предыдущему оратору

[gleendo]

artem_music: скрин уже есть как бы

[gleendo]

Антон Ф.: скрин

Answer 1

[Anton Filippov]

ну все просто, 2 левые колонки точно фикс, остальное подрезинить, либо второй вариант - резиновым оставить только блок с сообщениями

Comments

[gleendo]

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

[Anton Filippov]

ну как минимум флоатами, но можно и флексбоксом

[gleendo]

Антон Ф.: вот как действовать то? hkar.ru/GPEo

[Anton Filippov]

con_: codepen.io/vicodin/pen/wMbjOM
ну или без флекса можно с calc() поиграться, но у флекса лучше поддержка
дальше сам разберешься?

[gleendo]

Антон Ф.: а не флекс и тем более calc можно как нибудь порешать?

[Anton Filippov]

con_: да наверняка можно, но зачем, мне лень думать, если есть инструменты специально для таких ситуаций разработанные

[gleendo]

Антон Ф.: флекс уже норм поддержка, в продакшне используют же?

[Anton Filippov]

con_: 96%, использую уже полгода, у флексбокса поддержка пошире чем у css анимаций, транзишнов и прочих вещей, которые уже используются года полтора-два

[Anton Filippov]

con_: caniuse.com/#feat=flexbox

Answer 2

[artem_music]

Как-то так. Размеры бы сделал в vh и vw