Input
Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS Grid Example</title> <style> .container { display: grid; grid-template-columns: 100px 200px 1fr; gap: 10px; padding: 20px; background-color: #f0f0f0; } .box { padding: 20px; color: #fff; font-weight: bold; text-align: center; } .box1 { background-color: #ff6b6b; } .box2 { background-color: #4ecdc4; } .box3 { background-color: #1a535c; } </style> </head> <body> <div class="container"> <div class="box box1">100px</div> <div class="box box2">200px</div> <div class="box box3">Flexible (1fr)</div> </div> </body> </html>