Для того, чтобы изображения в grid сетке уменьшались в размерах при сужении, можно использовать свойство CSS grid-template-columns с единицами измерения, которые позволяют задавать размеры элементов относительно размеров контейнера, такие как fr или %.
Пример решения:
1. Создайте контейнер сетки в HTML-коде, используя элемент <div> или <section>. Установите ему класс или id, чтобы иметь возможность сослаться на него в CSS.
<div class="grid-container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div>
2. В CSS-файле или секции стилей внутри тега <style> добавьте следующий код:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
img {
width: 100%;
height: auto;
}
Объяснение кода:
- display: grid; задает элементу контейнера сетки стиль отображения "grid".
- grid-template-columns определяет количество и размеры колонок в сетке.
- repeat(auto-fit, minmax(200px, 1fr)) указывает, что количество колонок должно автоматически подстраиваться под ширину контейнера, а каждая колонка должна быть как минимум 200 пикселей шириной и заполнять оставшееся пространство равномерно, используя единицу fr.
- gap задает отступы между элементами сетки.
- img стилезадаются изображения внутри сетки. width: 100%; указывает, что ширина изображений должна занимать 100% доступного места внутри родительского контейнера, а height: auto; позволяет сохранить пропорции изображений при изменении размеров.
Таким образом, при сужении экрана или контейнера, изображения будут автоматически уменьшаться, чтобы подстроиться под доступное пространство, сохраняя пропорции.