Какие существуют способы создания адаптивных сеток с помощью CSS Grid?

Некоторые способы создания адаптивных сеток с помощью CSS Grid:

• Использование функций repeat(), minmax() и свойства grid-gap. 1 Эти инструменты помогают макету адаптироваться под различные размеры экранов, сохраняя при этом читаемость и удобство использования. 1 Например, код для создания сетки с автоматической адаптацией под количество столбцов, которые помещаются на экране, но не меньше определённого размера (100px): 1

.container {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  grid-gap: 20px;}

• Использование свойств auto-fill и auto-fit. 2 Они позволяют автоматически создавать колонки или строки: 2
• auto-fill создаёт колонки по размеру контейнера, даже если в них нет контента. 2 Если позволяет ширина, пустые колонки остаются видимыми. 2
• auto-fit подгоняет количество колонок под контент. 2 Если позволяет ширина, элементы будут растягиваться, а лишние колонки схлопнутся. 2

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