grid flex
Fri Nov 01 2024 13:57:58 GMT+0000 (Coordinated Universal Time)
Saved by
@abhigna
<!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>
content_copyCOPY
Comments