Веб-разработка, логотип Eqsash

Как использовать возможности CSS grid, краткое описание свойств

За все время существования веб-сайтов для их разработки применялись различные подходы для необходимого размещения элементов на странице. Среди таких подходов были: табличная верстка, использование обтекания элементов при помощи float, гибкая верстка при помощи flex. Но все эти подходы все равно не очень удобны для разработки, так как приходиться прилагать усилия, чтобы разместить элементы нужным образом. Наконец, в CSS приходит совершенно новая система разметки страницы – CSS grid.

css-grid

Тема CSS grid довольно большая, задача этой статьи - лишь краткое рассмотрение доступных свойств для использования при разработке. Свойства CSS grid делятся на две категории: свойства для контейнеров и свойства для самих элементов, размещаемых внутри контейнера. В этой технологии активно используется новая единица измерения – fr (fraction), она обычно представляет собой часть свободного пространства в сетке.

Какие свойства CSS grid есть для контейнеров? Рассмотрим их список ниже:

Как видно, в рассматриваемой технологии есть все необходимые свойства для гибкого позиционирования элементов-контейнеров. А какие свойства CSS grid есть для элементов, размещаемых в контейнере? Рассмотрим их также, список ниже:

Мы рассмотрели свойства для гибкого позиционирования элементов на странице при помощи новой технологии верстки веб-страниц. Но кроме свойств, существуют также специальные CSS grid функции:

Вместо заключения стоит сказать о том, что технология CSS grid – довольно новая, ее поддержка стала появляться только в новых версиях современных браузеров. Поэтому возможно, стоит немного подождать, пока эта технология станет использоваться повсеместно.

Оставить заявку

Последние статьи

Популярные разделы