Ідеальна 3-колонова верстка засобами CSS

Пропустимо ту частину, де я говорю, що мене звуть Рималь і те, що я захоплююсь версткою дизайну для сайтів, а саме HTML & CSS.

Також пропустимо ту частину, де я розповідаю, що в мене була мрія створити ідеальний шаблон зі 100% адаптацією та кросбраузерністю.

На просторах інтернету я не знайшов нормального пояснення про створення N-колонок блоків сайту, завжди і скрізь був кривий і негарний код.

Наша мета — зробити триколоночний сайт, блоки якого будуть:

  1. Зменшуватися в залежності від розміру екрана (тобто не йтиме вниз);
  2. Розтягуватись по всій ширині екрану (зазвичай це 2-х колонковий сайт);
  3. Адаптуватись при зменшенні заданих розмірів.

Отже, почнемо. Для того, щоб зробити горизонтальні 3 колонки, ми використовуватимемо властивість display: inline-block. Так-так, властивість float вже не так актуальна, але вона нам все ж таки знадобиться.

Перш ніж задати їм властивості, створимо 3 блоки, обернувши їх у класи main та inline:

Далі буде логічно написати стилі для цих класів, що ми зробимо:

Розмір вікна більше 900px

Розмір вікна менше 900px

Іноді потрібно, щоб дизайн сайту відразу адаптувався під конкретні розміри, тобто. не зникали будь-які частини сайту, а зберігався весь функціонал просто зі зменшенням їх розміру.

Для того, щоб розтягнути дизайн на всю ширину екрану, достатньо видалити якість max-w > main.

Щоб дизайн повністю не зменшувався за малих розмірів вікна, а адаптувався, додаємо в стилі @media запит:

Докладніше можна подивитися на JS Fiddle — вітається будь-яка зміна коду на краще його сторону.

За матеріал висловлюємо подяку нашому передплатнику Рималю Сафарову.

ОднакЗверніть увагу, що найпростіше досягти такого результату засобами CSS Flexbox, про який ми докладно розповіли в нашій статті.