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>

© Manajmnt code

Share to :

☷✎