Responsive Grid - Copy this Angular, Css Component to your project
Make this code responsive for me <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Responsive Header Design</title> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> <style> body, html { margin: 0; padding: 0; font family: 'Montserrat', sans serif; } .header { background color: #87CEEB; /* Sky Blue */ color: white; padding: 20px; text align: center; } .content { max width: 800px; margin: 0 auto; padding: 20px; } .grid container { display: grid; grid template columns: repeat(auto fit, minmax(100px, 1fr)); gap: 20px; margin top: 20px; } .grid item { background color: #4682B4; /* Steel Blue */ height: 100px; border radius: 50%; display: flex; align items: center; justify content: center; color: white; font weight: bold; } @media (max width: 600px) { .grid container { grid template columns: repeat(2, 1fr); } } </style> </head> <body> <div class="header"> <h1>PROVA</h1> </div> <div class="content"> <h2>A chi è rivolto</h2> <p>R</p> <div class="grid container"> <div class="grid item"></div> <div class="grid item"></div> <div class="grid item">Nessuna</div> <div class="grid item">Prova</div> </div> </div> </body> </html>
