Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial; padding: 20px; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; gap: 10px; } .box { background: #6366f1; color: white; padding: 20px; border-radius: 6px; text-align: center; } .header { grid-column: 1 / -1; background: #4f46e5; } .sidebar { grid-row: span 2; background: #7c3aed; } .footer { grid-column: 1 / -1; background: #1f2937; } </style> </head> <body> <div class="grid"> <div class="box header">Header (spans all 3 cols)</div> <div class="box sidebar">Sidebar (spans 2 rows)</div> <div class="box">Content A</div> <div class="box">Content B</div> <div class="box">Content C</div> <div class="box">Content D</div> <div class="box footer">Footer</div> </div> </body> </html>
Result
Open