diff --git a/src/examples/grid-component.md b/src/examples/grid-component.md
index 34d53f837d..042179b194 100644
--- a/src/examples/grid-component.md
+++ b/src/examples/grid-component.md
@@ -2,9 +2,9 @@
 
 > This is an example of creating a reusable grid component and using it with external data.
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="zYqvQgw" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Elastic Draggable Header Example">
-  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/zYqvQgw">
-  Vue 3 Elastic Draggable Header Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+<p class="codepen" data-height="323" data-theme-id="light" data-default-tab="js,result" data-user="57code" data-slug-hash="XWdBYYN" style="height: 323px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="XWdBYYN">
+  <span>See the Pen <a href="https://codepen.io/57code/pen/XWdBYYN">
+  XWdBYYN</a> by Young村长 (<a href="https://codepen.io/57code">@57code</a>)
   on <a href="https://codepen.io">CodePen</a>.</span>
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>