پیشنمایش زنده
کد HTML
<div class="grid-wrapper">
<div class="my-custom-grid-container">
<div class="grid-box grid-box1">1</div>
<div class="grid-box grid-box2">2</div>
<div class="grid-box grid-box3">3</div>
<div class="grid-box grid-box4">4</div>
<div class="grid-box grid-box5">5</div>
<div class="grid-box grid-box6">6</div>
<div class="grid-box grid-box7">7</div>
<div class="grid-box grid-box8">8</div>
<div class="grid-box grid-box9">9</div>
<div class="grid-box grid-box10">0</div>
<div class="grid-box grid-box11">A</div>
<div class="grid-box grid-box12">B</div>
<div class="grid-box grid-box13">C</div>
<div class="grid-box grid-box14">D</div>
</div>
</div>
کد CSS
.grid-wrapper {
cursor: default;
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
background: transparent;
}
.my-custom-grid-container {
display: grid;
grid-template-columns: repeat(5, 50px);
grid-template-rows: repeat(4, 50px);
gap: 2px;
padding: 4px;
border-radius: 6px;
box-shadow:
0 0 32px inset rgba(255, 255, 255, 0.329),
0 0 40px rgba(0, 0, 0, 0.67);
background: linear-gradient(
165deg,
rgba(0, 0, 0, 1) 0%,
rgba(171, 0, 0, 1) 75%,
rgba(255, 244, 0, 1) 100%
);
}
.grid-box {
cursor: default;
color: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border-radius: 3px;
transition: all 0.2s ease;
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px inset rgba(135, 78, 31, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.grid-box:hover {
transform: scale(1.04);
box-shadow: 1px 1px 20px inset rgba(135, 55, 31, 0.5);
}
.grid-box:nth-child(3):hover {
transform: scale(1.02);
font-size: 60px;
}
.grid-box:nth-child(8):hover {
transform: scale(1.02);
font-size: 60px;
}
.grid-box1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.grid-box2 {
grid-column: 2 / 2;
grid-row: 1 / 2;
}
.grid-box3 {
grid-column: 3 / 5;
grid-row: 1 / 3;
}
.grid-box4 {
grid-column: 5 / 5;
grid-row: 1 / 2;
}
.grid-box5 {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.grid-box6 {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.grid-box7 {
grid-column: 5 / 5;
grid-row: 2 / 3;
}
.grid-box8 {
grid-column: 1 / 3;
grid-row: 3 / 5;
}
.grid-box9 {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.grid-box10 {
grid-column: 4 / 5;
grid-row: 3 / 4;
}
.grid-box11 {
grid-column: 5 / 5;
grid-row: 3 / 4;
}
.grid-box12 {
grid-column: 3 / 4;
grid-row: 4 / 5;
}
.grid-box13 {
grid-column: 4 / 5;
grid-row: 4 / 5;
}
.grid-box14 {
grid-column: 5 / 5;
grid-row: 4 / 5;
}