Example:
<!DOCTYPE html> <html lang="en"> <head> <title>Responsive Image Card Grid with CSS</title> <style> * { box-sizing: border-box; font-family: 'Segoe UI', sans-serif; } body { margin: 0; padding: 20px; background-color: #f5f5f5; } h1 { text-align: center; } .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 20px 0; } .card { background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s; cursor: pointer; } .card:hover { transform: translateY(-5px); } .card img { width: 100%; height: auto; display: block; } .card-content { padding: 15px; } .card-content h3 { margin: 0 0 10px; font-size: 1.2em; } .card-content p { color: #555; font-size: 0.95em; } img { max-width: 20%; } </style> </head> <body> <h1>Responsive Image Card Grid</h1> <div class="grid-container"> <div class="card"> <img src="../../images/theme/javascript.png" alt="Image 1"> <div class="card-content"> <h3>Card Title 1</h3> <p>Short description for card 1 goes here.</p> </div> </div> <div class="card"> <img src="../../images/theme/angularjs.png" alt="Image 2"> <div class="card-content"> <h3>Card Title 2</h3> <p>Short description for card 2 goes here.</p> </div> </div> <div class="card"> <img src="../../images/theme/css.png" alt="Image 3"> <div class="card-content"> <h3>Card Title 3</h3> <p>Short description for card 3 goes here.</p> </div> </div> </div> </body> </html>
The layout uses auto-fit with minmax() to create a responsive grid that reshapes as needed. You can easily drop in real images or link this to a dynamic dataset.