Stas Bagretsov
"Верстка на Grid в CSS. Полное руководство и справочник"
Grid Layout — це спеціальний модуль CSS3, який дозволяє розміщувати елементи у вигляді сітки або таблиці. Як і Flexbox, Grid Layout забезпечує гнучкий підхід до компонування елементів. Однак якщо Flexbox розміщує вкладені елементи лише в одному напрямку — по горизонталі у вигляді рядків або по вертикалі у вигляді колонок, то Grid розміщує елементи одночасно в обох напрямках — у вигляді рядків і стовпців, утворюючи тим самим сітку, подібну до таблиці.
Основою для компонування в Grid Layout є grid-контейнер, у межах якого розташовуються елементи.
Щоб створити grid-контейнер, необхідно задати для його CSS-властивості display одне з двох значень: grid або inline-grid.
Значення grid визначає контейнер як блоковий елемент, а значення inline-grid — як рядковий (inline) елемент.