Щоб колонки переносилися, можна використовувати auto-fit або auto-fill . grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); Ці ключові слова кажуть браузеру перенести елемент на новий рядок, якщо не вистачає ширини, щоб його вмістити без перекриття. Збережена копія

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

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