Щоб створити розмітку Grid, вам просто потрібно виставити елементу display: grid . Цей крок автоматично зробить всіх прямих нащадків цього елемента grid елементами. Після цього ви можете сміливо використовувати різноманітні grid властивості для вирівнювання розмірів та позиціонування елементів належним чином.11 березня. 2018 р.
Просто додаємо до CSS контейнера властивість display: grid; Після цього можна вказувати інші властивості Grid. Але поки не задані інші властивості сітки, елементи вибудовані вертикально один за одним так, як вони йдуть у розмітці html. Колонки. За колонки відповідає властивість grid-template-columns.
CSS Grid Layout вже працює в Chrome, Firefox, Opera та Safari із березня цього року. Microsoft Edge нещодавно випустив попереднє складання з гридами за прапором.
Щоб описати всю сітку за допомогою одного рядка коду, використовуйте властивість grid-template . Ця властивість дозволяє задавати значення їм обох. Записується так: grid-template: auto 1fr auto / auto 1fr auto .
