Я делаю pet проект на React и не могу разобраться в том, как сделать хороший 3-х колоночный макет. Я пытался найти ответ в гугле, но не так и не нашёл :(
Идея такая: сайт должен состоять из 3 колонок.
Первая колонка - меню, оно статично. И естественно оно должно скрываться на мобилках.
Вторая колонка - основная информация. Этот блок прокручивается и отображает главную информацию на странице.
Третья колонка - дополнительная. Она существует только на 1200px+ экранах и отображает дополнительную информацию по типу поиска или сортировки, на некоторых страницах его не существует. Эта колонка статична.
Вот, как я сейчас реализую такую логику: добавляю 1 и 3 блоку position:fixed для того, чтобы они оставались на месте. Естественно они вырываются из потока страницы, и поставить главную информация становиться почти что невозможно. Для этого второй колонке я добавляю margin-left с шириной меню и margin-right с шириной дополнительной колонки. После этого я добавляю @media запросы, который изменяют margin left и margin right на точках 1200 и 576px (контрольный точки, на которых скрываются 3 и 1 колонка соответственно). Далее, я должен добавлять класс --expanded главному блоку тогда, когда 3 блока нет на странице для того, чтобы главный блок убрал правый margin. И это я ещё не написал про то, что у меню есть режим "мини", и для того, чтобы всё правильно работало я должен добавлять класс на главную колонку, который бы уменьшал margin-left по необходиости.
В общем это похоже на какой-то жонглирование "мэрджинами" и это сложно правильно реализовать. Может быть есть какой-то вариант сделать эту логику проще? Что-то вроде flex-а, со статичным положением 1 и 3 колонки.