Табличная верстка, это уже история. Ей практически в интернете ни кто не пользуется. Но хоть это и история, стоит сказать этому способу спасибо. Исторически первый способ верстки, разметки сайтов стал предтечей современных методов флекс и грид верстке. О последней и пойдет речь в этой статье. Термин grid переводится с английского как решётка или сеть.
Грид верстка — основной принцип
В простых случаях файл свёрстанный с помощью грид ни чем отличается от подобного сделанного с помощью таблицы. Чтобы убедиться в этом достаточно взглянуть на картинку ниже. Такую структуру можно реализовать и как таблицу, и как сетку. В обоих вариантах это будет пять ячеек по горизонтали, и четыре вертикальных столбцов. И отступы для каждой ячейки. Вся разница в коде, разметке и стилях. Для варианта грид это будет очень короткий код. Здесь практически все создается с помощью CSS
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;}
А вся разметка состоит их одного класса <div class="parent"></div>
О чём же говорит нам код CSS? Прежде всего о «приказе» отображать именно решетку display: grid; затем указывается количество потерявшихся столбцов grid-template-columns и рядов grid-template-rows: repeat.
Как сами понимаете приведенный выше пример самый простой вариант применения грид верстки. Но возможности этого метода весьма и весьма большие. И с его помощью создаются и более сложные структуры — например, главные страницы сайтов WordPress и плагинов этой же системы для применения грид в архивах рубрик и тегах, преобразования страниц с записями.
Пример использования грид верстки
С помощью грид можно создавать различные изображения — например сетки сетки уходящей в даль.
See the Pen
Перспектива by Аарон Интман (@aeafjusm)
on CodePen.
Эффект объема всегда смотрится привлекательно. И это на чистом CSS. Для удобства просмотра в окне результат можно уменьшить изображение начав на кнопку 0.5 или 0.25. Такую сетку использовать например для набора на спортивных сайтах заменив текст эмблемами клубов. Этот эффект грид верстки любезно предоставлен сайтом неизвестным автором.
Добавляя к разметке и стилям грид код джава можно добиться сложных по форме и весьма эффектных объёмных изображений. Как для красоты так и для дела. Архитекторы, дизайнеры мебели и интерьеров используют для разметки в своих проектах. Получается объемный макет комнаты или здания, задав масштаб для ячейки можно заполнять проект нужными деталями. И самому мастеру удобно и заказчику проще объяснять, как его проект будет выглядеть