RWD Templates
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { font-family: Arial, sans-serif; margin: 0; padding: 24px; background: #f4f5f7; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .card { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .card img { width: 100%; display: block; border-radius: 6px; margin-bottom: 12px; } .card h3 { margin: 0 0 8px; } .card p { margin: 0; color: #555; } </style> </head> <body> <div class='card-grid'> <div class='card'><h3>Card One</h3><p>Short description of the first card.</p></div> <div class='card'><h3>Card Two</h3><p>Short description of the second card.</p></div> <div class='card'><h3>Card Three</h3><p>Short description of the third card.</p></div> <div class='card'><h3>Card Four</h3><p>Short description of the fourth card.</p></div> </div> </body> </html>