Skip to content

Commit 1faccef

Browse files
simonwsimonw
authored
Create click-grid-to-expand.html
https://gist.github.com/simonw/4120213beeb2e7d52c8b135ddb5aea4b
1 parent 1d19215 commit 1faccef

File tree

1 file changed

+145
-0
lines changed

1 file changed

+145
-0
lines changed

‎click-grid-to-expand.html

+145
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Improved Interactive CSS Grid Layout with Symmetric Animation</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
}
11+
.grid-container {
12+
display: grid;
13+
grid-template-columns: repeat(4, 1fr);
14+
grid-template-rows: repeat(2, 100px);
15+
gap: 10px;
16+
padding: 10px;
17+
background-color: #f0f0f0;
18+
width: 800px;
19+
height: 210px;
20+
position: relative;
21+
}
22+
.grid-item {
23+
background-color: #ffffff;
24+
border: 2px solid #333;
25+
border-radius: 10px;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
font-size: 16px;
30+
font-weight: bold;
31+
text-align: center;
32+
}
33+
.item1 {
34+
grid-column: span 2;
35+
grid-row: span 2;
36+
background-color: #ffcccb;
37+
}
38+
.item2 {
39+
grid-column: span 1;
40+
grid-row: span 2;
41+
background-color: #c1e1c1;
42+
cursor: pointer;
43+
}
44+
.item3 {
45+
grid-column: span 1;
46+
grid-row: span 1;
47+
background-color: #add8e6;
48+
}
49+
.item4 {
50+
grid-column: span 1;
51+
grid-row: span 1;
52+
background-color: #fffacd;
53+
}
54+
.expanded-overlay {
55+
position: absolute;
56+
background-color: #c1e1c1;
57+
border: 2px solid #333;
58+
border-radius: 10px;
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
font-size: 16px;
63+
font-weight: bold;
64+
text-align: center;
65+
cursor: pointer;
66+
transition: all 0.5s ease;
67+
}
68+
</style>
69+
</head>
70+
<body>
71+
<div class="grid-container" id="gridContainer">
72+
<div class="grid-item item1">2x2</div>
73+
<div class="grid-item item2" id="expandable">1x2<br>(Click to expand)</div>
74+
<div class="grid-item item3">1x1</div>
75+
<div class="grid-item item4">1x1</div>
76+
</div>
77+
78+
<script>
79+
const gridContainer = document.getElementById('gridContainer');
80+
const expandable = document.getElementById('expandable');
81+
let isExpanded = false;
82+
let overlay;
83+
let originalRect;
84+
85+
function createOverlay(element) {
86+
originalRect = element.getBoundingClientRect();
87+
const containerRect = gridContainer.getBoundingClientRect();
88+
89+
overlay = document.createElement('div');
90+
overlay.className = 'expanded-overlay';
91+
overlay.textContent = 'Expanded!\nClick to shrink';
92+
overlay.style.left = `${originalRect.left - containerRect.left}px`;
93+
overlay.style.top = `${originalRect.top - containerRect.top}px`;
94+
overlay.style.width = `${originalRect.width}px`;
95+
overlay.style.height = `${originalRect.height}px`;
96+
97+
gridContainer.appendChild(overlay);
98+
99+
// Force reflow
100+
overlay.offsetHeight;
101+
102+
// Animate to full size
103+
overlay.style.left = '0';
104+
overlay.style.top = '0';
105+
overlay.style.width = '100%';
106+
overlay.style.height = '100%';
107+
108+
overlay.addEventListener('click', toggleExpansion);
109+
}
110+
111+
function removeOverlay() {
112+
if (overlay) {
113+
const containerRect = gridContainer.getBoundingClientRect();
114+
115+
// Animate back to original size
116+
overlay.style.left = `${originalRect.left - containerRect.left}px`;
117+
overlay.style.top = `${originalRect.top - containerRect.top}px`;
118+
overlay.style.width = `${originalRect.width}px`;
119+
overlay.style.height = `${originalRect.height}px`;
120+
121+
// Remove overlay after animation completes
122+
overlay.addEventListener('transitionend', function handler() {
123+
overlay.removeEventListener('transitionend', handler);
124+
overlay.removeEventListener('click', toggleExpansion);
125+
gridContainer.removeChild(overlay);
126+
overlay = null;
127+
expandable.style.visibility = 'visible';
128+
});
129+
}
130+
}
131+
132+
function toggleExpansion() {
133+
if (!isExpanded) {
134+
expandable.style.visibility = 'hidden';
135+
createOverlay(expandable);
136+
} else {
137+
removeOverlay();
138+
}
139+
isExpanded = !isExpanded;
140+
}
141+
142+
expandable.addEventListener('click', toggleExpansion);
143+
</script>
144+
</body>
145+
</html>

0 commit comments

Comments
 (0)