diff --git a/examples/cms-agilitycms/components/hero-post.js b/examples/cms-agilitycms/components/hero-post.js
index 141b7e641751..d6e8869ddc2b 100644
--- a/examples/cms-agilitycms/components/hero-post.js
+++ b/examples/cms-agilitycms/components/hero-post.js
@@ -20,7 +20,7 @@ export default function HeroPost({
           slug={slug}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-agilitycms/components/more-stories.js b/examples/cms-agilitycms/components/more-stories.js
index 12c3cbc50f93..a4e0fdf761af 100644
--- a/examples/cms-agilitycms/components/more-stories.js
+++ b/examples/cms-agilitycms/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ title, posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         {title}
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-builder-io/components/hero-post.js b/examples/cms-builder-io/components/hero-post.js
index 680afd982901..0a7b8f68f7fb 100644
--- a/examples/cms-builder-io/components/hero-post.js
+++ b/examples/cms-builder-io/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} slug={slug} url={coverImage} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-builder-io/components/more-stories.js b/examples/cms-builder-io/components/more-stories.js
index bcf78e019cd2..45714977feea 100644
--- a/examples/cms-builder-io/components/more-stories.js
+++ b/examples/cms-builder-io/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.data.slug}
diff --git a/examples/cms-buttercms/components/hero-post.js b/examples/cms-buttercms/components/hero-post.js
index a7a43667a016..f45ed8853b12 100644
--- a/examples/cms-buttercms/components/hero-post.js
+++ b/examples/cms-buttercms/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-buttercms/components/more-stories.js b/examples/cms-buttercms/components/more-stories.js
index 6f90f9b01c7a..b12d7771a65a 100644
--- a/examples/cms-buttercms/components/more-stories.js
+++ b/examples/cms-buttercms/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-contentful/components/hero-post.js b/examples/cms-contentful/components/hero-post.js
index 5b71cfaf43b2..5a1551333ae4 100644
--- a/examples/cms-contentful/components/hero-post.js
+++ b/examples/cms-contentful/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} slug={slug} url={coverImage.url} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-contentful/components/more-stories.js b/examples/cms-contentful/components/more-stories.js
index dcdd9b4e6ae7..57fdbb6c4659 100644
--- a/examples/cms-contentful/components/more-stories.js
+++ b/examples/cms-contentful/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-cosmic/components/hero-post.js b/examples/cms-cosmic/components/hero-post.js
index 453b1816ee4e..e8f7823c2b03 100644
--- a/examples/cms-cosmic/components/hero-post.js
+++ b/examples/cms-cosmic/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage.imgix_url} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-cosmic/components/more-stories.js b/examples/cms-cosmic/components/more-stories.js
index 2e25326c352d..35bb95e0ab66 100644
--- a/examples/cms-cosmic/components/more-stories.js
+++ b/examples/cms-cosmic/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-datocms/components/hero-post.js b/examples/cms-datocms/components/hero-post.js
index 133dc33e5869..0ca3e0cc4978 100644
--- a/examples/cms-datocms/components/hero-post.js
+++ b/examples/cms-datocms/components/hero-post.js
@@ -20,7 +20,7 @@ export default function HeroPost({
           slug={slug}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-datocms/components/more-stories.js b/examples/cms-datocms/components/more-stories.js
index 13a09bd8f729..4bab320f6537 100644
--- a/examples/cms-datocms/components/more-stories.js
+++ b/examples/cms-datocms/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-drupal/components/hero-post.js b/examples/cms-drupal/components/hero-post.js
index c5aa6d0a7660..cf3e657a9def 100644
--- a/examples/cms-drupal/components/hero-post.js
+++ b/examples/cms-drupal/components/hero-post.js
@@ -18,7 +18,7 @@ export default function HeroPost({
           <CoverImage title={title} coverImage={coverImage} slug={slug} />
         )}
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={slug}>
diff --git a/examples/cms-ghost/components/hero-post.js b/examples/cms-ghost/components/hero-post.js
index 1d786d96d2be..6a91725afd64 100644
--- a/examples/cms-ghost/components/hero-post.js
+++ b/examples/cms-ghost/components/hero-post.js
@@ -22,7 +22,7 @@ export default function HeroPost({
           height={1216}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-ghost/components/more-stories.js b/examples/cms-ghost/components/more-stories.js
index 92eefcf51c36..07c12287d7cf 100644
--- a/examples/cms-ghost/components/more-stories.js
+++ b/examples/cms-ghost/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-graphcms/components/hero-post.js b/examples/cms-graphcms/components/hero-post.js
index 9f39ead6849e..776866d8dc76 100644
--- a/examples/cms-graphcms/components/hero-post.js
+++ b/examples/cms-graphcms/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage slug={slug} title={title} url={coverImage.url} />
       </div>
-      <div className="mb-20 md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 md:mb-28">
+      <div className="mb-20 md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl leading-tight lg:text-6xl">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-kontent/components/hero-post.js b/examples/cms-kontent/components/hero-post.js
index 8536e825c5d5..76495802b579 100644
--- a/examples/cms-kontent/components/hero-post.js
+++ b/examples/cms-kontent/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} src={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-kontent/components/more-stories.js b/examples/cms-kontent/components/more-stories.js
index dcdd9b4e6ae7..57fdbb6c4659 100644
--- a/examples/cms-kontent/components/more-stories.js
+++ b/examples/cms-kontent/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-prepr/components/hero-post.js b/examples/cms-prepr/components/hero-post.js
index c2ff575ee26a..5fb5c6909be7 100644
--- a/examples/cms-prepr/components/hero-post.js
+++ b/examples/cms-prepr/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage slug={slug} title={title} url={coverImage} />
       </div>
-      <div className="mb-20 md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 md:mb-28">
+      <div className="mb-20 md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl leading-tight lg:text-6xl">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-prismic/components/hero-post.js b/examples/cms-prismic/components/hero-post.js
index 8d181d29dfa8..b594f5420020 100644
--- a/examples/cms-prismic/components/hero-post.js
+++ b/examples/cms-prismic/components/hero-post.js
@@ -21,7 +21,7 @@ export default function HeroPost({
           url={coverImage.url}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-prismic/components/more-stories.js b/examples/cms-prismic/components/more-stories.js
index cfe7b62e4150..2a29128c8117 100644
--- a/examples/cms-prismic/components/more-stories.js
+++ b/examples/cms-prismic/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map(({ node }) => (
           <PostPreview
             key={node._meta.uid}
diff --git a/examples/cms-sanity/components/hero-post.js b/examples/cms-sanity/components/hero-post.js
index f198fb3f54d7..4d81ed0850ac 100644
--- a/examples/cms-sanity/components/hero-post.js
+++ b/examples/cms-sanity/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage slug={slug} title={title} image={coverImage} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-sanity/components/more-stories.js b/examples/cms-sanity/components/more-stories.js
index dcdd9b4e6ae7..57fdbb6c4659 100644
--- a/examples/cms-sanity/components/more-stories.js
+++ b/examples/cms-sanity/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-storyblok/components/hero-post.js b/examples/cms-storyblok/components/hero-post.js
index 2cab6b993289..eadefeaac135 100644
--- a/examples/cms-storyblok/components/hero-post.js
+++ b/examples/cms-storyblok/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-storyblok/components/more-stories.js b/examples/cms-storyblok/components/more-stories.js
index 2ea20c3f6b25..583c01eda265 100644
--- a/examples/cms-storyblok/components/more-stories.js
+++ b/examples/cms-storyblok/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-strapi/components/hero-post.js b/examples/cms-strapi/components/hero-post.js
index a246a0847317..910933b96169 100644
--- a/examples/cms-strapi/components/hero-post.js
+++ b/examples/cms-strapi/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage.url} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-strapi/components/more-stories.js b/examples/cms-strapi/components/more-stories.js
index 13a09bd8f729..4bab320f6537 100644
--- a/examples/cms-strapi/components/more-stories.js
+++ b/examples/cms-strapi/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-takeshape/components/hero-post.js b/examples/cms-takeshape/components/hero-post.js
index 209d62c118fc..70d417ef5792 100644
--- a/examples/cms-takeshape/components/hero-post.js
+++ b/examples/cms-takeshape/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} coverImage={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-takeshape/components/more-stories.js b/examples/cms-takeshape/components/more-stories.js
index dcdd9b4e6ae7..57fdbb6c4659 100644
--- a/examples/cms-takeshape/components/more-stories.js
+++ b/examples/cms-takeshape/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-wordpress/components/hero-post.js b/examples/cms-wordpress/components/hero-post.js
index 302ff1e74e1b..46d376e81ad6 100644
--- a/examples/cms-wordpress/components/hero-post.js
+++ b/examples/cms-wordpress/components/hero-post.js
@@ -18,7 +18,7 @@ export default function HeroPost({
           <CoverImage title={title} coverImage={coverImage} slug={slug} />
         )}
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-wordpress/components/more-stories.js b/examples/cms-wordpress/components/more-stories.js
index d77cd124e75c..e35af77cbf8d 100644
--- a/examples/cms-wordpress/components/more-stories.js
+++ b/examples/cms-wordpress/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map(({ node }) => (
           <PostPreview
             key={node.slug}