responsive image gallery
<style>
.channel-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 20px auto;
}
.grid-item {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.grid-item:last-child {
border-bottom-left-radius: 0;
}
.grid-item:first-child {
border-top-left-radius: 0;
}
.video-card {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.video-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.channel-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.channel-container {
grid-template-columns: repeat(1, 1fr);
}
}
</style>
<div class="channel-container">
<div class="grid-item">
<img src="https://cdn.pixabay.com/photo/2023/10/18/00/59/mountain-8322610_1280.jpg" class="video-thumbnail">
<h2>Video 1</h2>
<p>Description of video 1</p>
</div>
<div class="grid-item">
<img src="https://media.istockphoto.com/id/534215078/photo/rio-de-janeiro-aerial.webp?b=1&s=612x612&w=0&k=20&c=7lB9L-XNEDP7yLFN7OReYgzi-40sItid9ROhUl6y594=" class="video-thumbnail">
<h2>Video 2</h2>
<p>Description of video 2</p>
</div>
<div class="grid-item">
<img src="https://media.istockphoto.com/id/1419626160/photo/aerial-view-of-the-beach-and-temple-of-poseidon-at-cape-sounion.webp?b=1&s=612x612&w=0&k=20&c=niH-srVzm8VbHZvxn_uQc92MjDhXUPiiPYwjeTGOBu0=" class="video-thumbnail">
<h2>Video 3</h2>
<p>Description of video 3</p>
</div>
<!-- Add more grid items as needed -->
</div>
© 2025 Manajmnt code
Comments
Post a Comment
message