159 читали · 2 года назад
Автоматическое изменение размера столбцов в CSS Grid: auto-fill против auto-fit
Источник: WebForMyself.com В CSS Grid помимо явной установки размеров колонок есть еще одна из мощнейших функций – в Grid можно повторять колонки для заполнения контейнера и автоматически размещать в них элементы. В частности, мы можем указать количество столбцов в сетке, а затем браузер будет управлять адаптивностью этих колонок за нас. На маленьких экранах будет показываться меньше столбцов, а на больших – больше, так как экран позволяет вместить больше столбцов. Для этого даже не нужно писать медиа запросы...
Всё о гридах
Источники: https://doka.guide/css/grid-guide/ https://habr.com/ru/companies/macloud/articles/564182/ https://webformyself.com/min-content-max-content-i-fit-content-v-css/ https://developer.mozilla.org/en-US/docs/Web/CSS/minmax https://habr.com/ru/companies/ruvds/articles/529830/ Содержание: 1. Что такое гриды? 2. Как же Грид работает? 3. Основные термины 4. Схема CSS Grids 5. display: grid; 6. grid-template-columns, grid-template-rows 6.1. repeat() 6.2. fr 7. grid-auto-columns, grid-auto-rows 7.1...