Як зробити grid

Щоб описати всю сітку за допомогою одного рядка коду, використовуйте властивість grid-template . Ця властивість дозволяє задавати значення їм обох. Записується так: grid-template: auto 1fr auto / auto 1fr auto .

Першим ділом застосовуємо display:grid до <table> , щоб перетворити таблицю на сітку. Це нічого не зламає: якщо браузер не підтримує Grid, то застосує display:table. Дочірні елементи <thead> та <tbody> стають елементами сітки. Нам не потрібно думати про <thead>, <tbody> або навіть <tr>.

Просто додаємо до CSS контейнера властивість display: grid; Після цього можна вказувати інші властивості Grid. Але поки не задані інші властивості сітки, елементи вибудовані вертикально один за одним так, як вони йдуть у розмітці html. Збережена копія