Если желаете создать на сайте стильную галерею под изображение, так, чтоб еще присутствовали эффекты, такие, как при наведение клика на картинку. То безусловно эта галерея вам должна понравится, так как отлично смотрится, но главное корректно показывает на широком экране или на мобильном гаждет. Это здесь показывает, как можно использовать CSS Grid (с резервным флексбоксом) для создания отзывчивой галереи изображений без медиа-запросов.
HTML
Код
<div class="container">
<div class="gallery">
<div class="gallery-item">
<img class="gallery-image" src="http://zornet.ru/_fr/89/8496556.jpg" alt="">
</div>
<div class="gallery-item">
<img class="gallery-image" src="http://zornet.ru/_fr/89/4224196.jpg" alt="">
</div>
<div class="gallery-item">
<img class="gallery-image" src="http://zornet.ru/_fr/89/3728274.jpg" alt="">
</div>
<div class="gallery-item">
<img class="gallery-image" src="http://zornet.ru/_fr/89/8344670.jpg" alt="">
</div>
<div class="gallery-item">
<img class="gallery-image" src="http://zornet.ru/_fr/89/2834750.jpg" alt="">
</div>
<div class="gallery-item">
<img class="gallery-image" src="http://zornet.ru/_fr/89/7155446.jpg" alt="">
</div>
</div>
</div>
CSS
Код
:root {
/* Base font size */
font-size: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #fafafa;
}
.container {
max-width: 100rem;
margin: 0 auto;
padding: 0 2rem 2rem;
}
.heading span {
display: block;
}
.gallery {
display: flex;
flex-wrap: wrap;
margin: -1rem -1rem;
}
.gallery-item {
flex: 1 0 24rem;
margin: 1rem;
box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.gallery-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease-out;
}
.gallery-image:hover {
transform: scale(1.15);
}
/*
*/
@supports (display: grid) {
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
grid-gap: 2rem;
}
.gallery,
.gallery-item {
margin: 0;
}
}
Установка завершена.
Демонстрация
