For Business
Login
Home
Assessments
Mytat Certificates
Community
Courses
Premium Courses
jobs
Practice
Upskilling
Projects
Help
Run ยป
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid Example</title> <style> .container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* Three columns with 1:2:1 ratio */ grid-template-rows: auto 1fr auto; /* Auto-sized header and footer, main content fills remaining space */ min-height: 100vh; /* Ensure full viewport height */ grid-gap: 20px; /* Gap between grid items */ } header, footer { background-color: #333; color: #fff; padding: 10px; } main { background-color: #f4f4f4; padding: 20px; } </style> </head> <body> <div class="container"> <header>Header</header> <main>Main Content</main> <footer>Footer</footer> </div> </body> </html>
