Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; } .layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 56px 1fr 48px; grid-template-areas: "header header" "side main" "footer footer"; height: 100vh; gap: 4px; padding: 4px; } .h { grid-area: header; background: #6366f1; color: white; display: flex; align-items: center; padding: 0 16px; border-radius: 6px; } .s { grid-area: side; background: #ede9fe; padding: 16px; border-radius: 6px; } .m { grid-area: main; background: white; padding: 20px; border: 1px solid #e5e7eb; border-radius: 6px; } .f { grid-area: footer; background: #1f2937; color: #9ca3af; display: flex; align-items: center; padding: 0 16px; border-radius: 6px; font-size: 13px; } </style> </head> <body> <div class="layout"> <div class="h">Header</div> <div class="s"><strong>Sidebar</strong><p>Navigation links</p></div> <div class="m"><h2>Main Content</h2><p>Page body goes here.</p></div> <div class="f">© 2025 LearnCode</div> </div> </body> </html>
Result
Open