Вёрстка на Grid в CSS. Полное руководство и справочник. Решение проблемы с помощью Grid. Используем трюк с display: table

Всем привет! Сегодня мы поговорим про то, что такое grid systems(система сеток) или просто гибкие сетки в адаптивной верстке .

Сначала дадим определение тому, что такое Grid System .

Grid System - коллекция стилей, основанных на классах, которые позволяют пользователю контролировать макет страницы, используя систему строк и колонок.

Представим, что у нас есть страница блога. Она разделена на 2 колонки: слева основная часть, а справа - сайдбар. Давайте попробуем создать гибкую сетку для такой страницы.

Ну, для начала мы должны сделать хоть и элементарную, но html разметку.

Здесь у нас есть блок, который содержит всю страницу, в нем лежит блок с блогом, в котором лежат 2 блока: основная часть страницы и сайдбар.

Итак, вся наша страница будет размером 960px . Вся сетка разделена на 12 колонок по 69px . каждая. Часть для блога будет шириной 900px . Основная часть страницы будет 566px , сайдбар - 331px .

Вот, что мы получим в итоге

#page {
margin: 36px auto;
width: 960px;
}

Blog {
margin: 0 auto 53px;
width: 900px;
}

Blog .main {
float: left;
width: 566px;
}

Blog .sidebar {
float: right;
width: 331px;
}

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

Для этого есть все та же формула, что и для шрифтов

цель / контекст = результат

Переведем блок всей страницы из пикселей в проценты.

#page {
margin: 36px auto;
width: 90%;
}

90% выбрано по тому, что в таком случае у нас будут еще и отступы по краям по 5% . Однако вы можете выбрать другое значение.

Используем нашу формулу: 900 / 960 = 0.9357

Умножим результат на 100 , чтобы получить проценты, и пропишем в наш css .

Blog {
margin: 0 auto 53px;
width: 93.75%;
}

То же самое нужно сделать и с колонками, но заметьте, что контекст изменился. Т.к. колонки находятся внутри блока с классом .blog , то он и будет контекстом. Давайте посчитаем.

566 ÷ 900 = .628888889

331 ÷ 900 = .367777778

Переводим все в проценты и записываем в таблицу стилей.

Blog .main {
float: left;
width: 62.8888889%;
}

Blog .sidebar {
float: right;
width: 36.7777778%;
}

Вот и все! Теперь мы получили гибкую сетку и можем использовать ее при верстке.

Как видите, все очень просто. В основе гибкой сетки, как и гибкого шрифта, лежит все одна и та же формула, запомнив которую, вы сможете без проблем верстать адаптивные сайты.

Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните!

А у меня на этом все, спасибо за внимание и удачной адаптивной верстки!

Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.

Что вы узнаете из этой статьи:

• как раньше работали с CSS-разметкой;
• разницу между устаревшими подходами и современными стандартами;
• как начать работу с новыми стандартами (Flexbox и Grid);
• почему вас должны волновать эти современные стандарты.

Как раньше работали с CSS-разметкой

Задача

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

Вот пример того, к чему мы стремимся:

Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента

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

1. Создаём div с двумя элементами

Например,