Как создать адаптивную галерею изображений с помощью CSS display: grid
Адаптивный веб-дизайн — это метод дизайна, который помогает разработчику внести изменения в CSS, чтобы адаптировать любой веб-сайт к любому размеру экрана, доступному в современном мире. Все мы знаем, что хамелеон может менять свой размер и форму в зависимости от ситуации. Адаптивный веб-дизайн работает именно так. Сегодня мы собираемся создать простую галерею изображений с адаптивным CSS, которая может адаптироваться к любому устройству, от большого до маленького. Для вашего удобства мы предоставили видеоурок ниже. Пожалуйста, посмотрите видеоурок, прежде чем собирать исходный код.
✅ Скачать готовы код:
zip
How to create a responsive image gallery using CSS display grid.zip1.84 Mb
Мы надеемся, что вы ознакомились с руководством по адаптивной галерее изображений с использованием функции сетки отображения CSS. Если у вас есть коллекция изображений, которые вы хотите отобразить на своем веб-сайте. Вы можете использовать функцию сетки отображения CSS, чтобы создать адаптивную галерею изображений с этими изображениями. Следуя этой технике CSS, ваши изображения будут изменены и переупорядочены, чтобы идеально соответствовать любому размеру экрана. Этот тип адаптивной галереи изображений также можно создать с помощью CSS Flexbox. CSS Flexbox — это одномерная система компоновки. CSS Grid — это двумерная система макетов, предоставляющая как строки, так и столбцы, что делает ее подходящей для сложных макетов.
Мы установили восемь изображений внутри контейнера, называемого оберткой, в части HTML. Универсальный селектор в CSS использует нулевое поле и нулевое дополнение. Этот код удаляет стиль по умолчанию, который есть в браузере. Затем берется «box-sizing: border-box», чтобы ширина и высота элементов оставались постоянными. Затем контейнеру-оболочке присваивается свойство display:grid, чтобы элементы изображения отображались в виде контейнера-сетки. Затем мы взяли «шаблон сетки», который определяет размер и расположение столбцов в сетке. Мы также добавили анимацию масштабирования при наведении курсора мыши.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете загрузить исходный код, нажав кнопку «СКАЧАТЬ». Кроме того, если у вас есть какие-либо вопросы, предложения или отзывы, оставьте комментарий ниже.
Чтобы создать этот фрагмент кода «Галерея адаптивных изображений», сначала создайте файл HTML, а затем файл CSS. Затем скопируйте и вставьте следующий код в свои файлы.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" />
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ecf4fb;
}
.wrapper {
width: 80%;
margin: 50px auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 30px;
}
.wrapper img {
width: 100%;
cursor: pointer;
transition: 1s ease;
}
.wrapper img:hover {
transform: scale(0.9);
}
Мы надеемся, что код работает правильно в вашем браузере. В наши дни ни один веб-сайт невозможно увидеть без изображений. Из-за наличия устройств разного размера сложно правильно представить изображения посетителям. Следовательно, адаптивная галерея изображений играет важную роль в создании красивого, удобного и успешного веб-сайта. Нажмите кнопку «Загрузить больше» на главной странице, чтобы получить больше фрагментов этого типа. Спасибо за посещение нашего веб-сайта.
фото и видео галерея
