Коротко о Flexbox и Grid + отличная Grid галерея

Сегодня поговорим о таких модулях в CSS как Flexbox и Grid для создания легкой, быстрой и удобной верстки html страниц. Резиновая верстка.

Долгое время проблема верстки сайта, в основном, решалась с помощью CSS. С его помощью можно легко манипулировать шрифтами, фоновыми цветами и изображениями. Но когда дело доходило до размещения блоков с текстами и картинками, приходилось все же изрядно потрудиться. Не настолько изрядно, как еще раньше с версткой с помощью одних лишь таблиц в HTML, но все таки даже с CSS это было далеко не всегда простым занятием. Если для параллельного размещения блоков с основным текстом, использовался элемент «float», то нужно было тщательно высчитывать размеры и отступы в пикселях или других единицах, иначе все начинало налезать друг на друга и сдвигать всю созданную прежде конструкцию. С созданием блока меню можно было использовать другие приемы (например, «display: table»), но все же в некоторых случаях, нагромождения строчек кода отнюдь не радовали глаз.

Другое дело — работа с современными способами разметки Flexbox или Grid. С новыми стандартами бывшие проблемными моменты верстки решаются меньшим количеством строк кода и отсутствием избытка дополнительных элементов в файле HTML.

Например, для выстраивания каркаса сайта, состоящего из нескольких или более блоков, есть очень удобные элементы Grid: column (столбец) и row (ряд). Само название Grid переводится, как «сетка». Грубо говоря, пространство страницы сайта можно представить как сетку и регулировать ее содержимое с помощью столбцов и рядов, задавая им нужные параметры.

Например, можно прописать в файле стиля разметки к главному «grid-template-columns: 30% 70%». В данном случае, один блок будет равен 30 % от ширины страницы, а другой — 70%. Автоматически подгоняются размеры, и учитываются отступы. «Template» переводится, как «шаблон», то есть выстраивается, таким образом, шаблон сайта. Вообще, название практически каждого элемента современных стандартов прозрачно намекает на его роль в оформлении сайта, поэтому сейчас верстку называют семантической (смысловой). С Grid легко можно построить сайт со сложным расположением блоков, но кропотливая работа с тем, что будет находиться внутри них, может вызвать некоторые затруднения.

Flexbox тоже своим названием говорит сам за себя («flex» - «гибкий»), используя эту спецификацию легко манипулировать размерами и позициями блоков, выравниванием их содержимого. Благодаря стандартам Flexbox, конструируемые контейнеры с текстом или изображениями могут выстроиться в идеальную линию, но в случае многоэтажности и необходимости добавления в сетку асимметрии, возможно, придется столкнуться с трудностями.

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

Пример Flexbox

See the Pen Demo Flexbox 1 by CSS-Tricks (@css-tricks) on CodePen.


Пример Grid

See the Pen Grid by Example 1: Defining a Grid by rachelandrew (@rachelandrew) on CodePen.


Grid генератор с сортировкой, табами и поиском

Представляю вашему вниманию занимательный образец Grid блоков, которые отлично подойдут чтобы организовать адаптивную галерею или какую-нибудь другую информацию в удобном виде. Можно использовать как галерею с табами.

See the Pen Muuri - Grid Demo ( 0.4.0 ) by 王兆羽 (@bcwang) on CodePen.