user

Авторизация

Добро пожаловать!

Регистрация

Graf

Кодинг

3-колочная верстка страницы с помощью CSS

 На сегодняшний день одной из самых главных вещей страницы сайта является ее адаптивность. В большинстве случае главную часть страницы разделяют на три части: left sidebar, rigth sidebar и main.

css

В разделах sidebar чаще всего размещаю вспомогательную информацию. Основная же информация размещается в разделе main.

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

 Далее делаем адаптацию нашей страницы. В CSS файле прописываем следующие свойства:

 Вот и результат который мы получили:

 Для адаптации под мобильные устройства очень часто приходится sidebar скрывать. Чтобы это сделать достаточно добавить медиа-запросом:

 Как только размер экрана будет меньше 600px sidebar автоматически пропадут, а блок main займет весь экран.

 Теперь вы знаете как создается колоночная верста и как еще адаптировать. Конечно это малая часть из того что включает в себя адаптация страницы и если вы хотите знать больше то не пропускайте наши статьи.