Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; gap: 10px; } .header { grid-area: header; background-color: lightblue; } .sidebar { grid-area: sidebar; background-color: lightgreen; } .main { grid-area: main; background-color: lightcoral; } .footer { grid-area: footer; background-color: lightgoldenrodyellow; } .grid-item { border: 1px solid #ccc; padding: 10px; text-align: center; } .header, .sidebar, .content, .footer { background-color: lightblue; border: 1px solid #ccc; padding: 10px; text-align: center; } </style> <body> <div class="grid-container"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="content">Content</div> <div class="footer">Footer</div> </div> </body> </html>
console output