Online Html Editor

<!DOCTYPE html> <html lang="en"> <head> <title>Grid Template Example</title> <style> .grid-container { display: grid; grid-template: "header header header" 100px "sidebar content content" 200px "footer footer footer" 50px / 100px 1fr 1fr; gap: 10px; background-color: lightgray; padding: 10px; } .grid-item { background-color: lightcoral; padding: 20px; text-align: center; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .footer { grid-area: footer; } </style> </head> <body> <div class="grid-container"> <div class="grid-item header">Header</div> <div class="grid-item sidebar">Sidebar</div> <div class="grid-item content">Content<br> <b>`/ 100px 1fr 1fr;`:</b> This will divide whole layout area into three columns, First column will be 100 px wide, second and third column will equally divide remaining space available. </div> <div class="grid-item footer">Footer</div> </div> </body> </html>