Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Grid and Flexbox</title>
    <style>
        body { 
            font-family: Arial, sans-serif;
        }
        .header, .footer { 
            display: flex;
            justify-content: center;
            align-items: center;
            background: #4CAF50;
            color: #fff; 
            height: 60px; 
            }
        .content { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr);
            gap: 10px; 
            padding: 20px;
        }
        .box { 
            padding: 20px; 
            background: #2196F3;
            color: #fff;
            text-align: center;
            transition: transform 0.3s; 
            }
        .box:hover { transform: scale(1.05); background: #1E88E5; }
    </style>
</head>
<body>
    <div class="header">Header</div>
    <div class="content">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter