Как сделать верстку для мобильника: три колонки по 100%, внизу липкая панель с переключателем?

Question

[Andry]

Браузерная игра. На десктопе экран поделен на три фрейма: основной, чат, список юзеров в локации.

Хочу переделать на мобилки в виде трех колонок шириной на весь екран и переключатель между ними. Внизу липка панелька с кнопками переключения между колонками и др. управление.

Не знаю, на каком варианте верстки остановится. Нужно простое переключение между колонками. Желательно через css. Скрытые колонки не должны терять позицию прокрутки.

Слепил пробный вариант, поставив три div в ряд по 100vw, но так переключение между колонками только
через JavaScript scrollIntoView()

C grid плотно не общался. Может кто на гридах подскажет элегантное решение?

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

Answer 1

[approximate solution]

Нужно простое переключение между колонками.

Табы
https://www.w3schools.com/w3css/w3css_tabulators.asp
Только в вашем случае переключатель с навигацией нужно будет перенести вниз.

Comments

[Andry]

Действительно. Ответ не поверхности. Я, видимо, его отбросил из-за display:none. Боюсь как-бы боком не вылезла где-нибудь эта особенность.