diff --git a/examples/cms-agilitycms/components/hero-post.js b/examples/cms-agilitycms/components/hero-post.js
index 141b7e641751a..d6e8869ddc2ba 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 12c3cbc50f939..a4e0fdf761af8 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 680afd9829011..0a7b8f68f7fbd 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 bcf78e019cd28..45714977feea9 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 a7a43667a0161..f45ed8853b127 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 6f90f9b01c7a6..b12d7771a65a9 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 5b71cfaf43b26..5a1551333ae49 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 dcdd9b4e6ae7b..57fdbb6c4659c 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 453b1816ee4e8..e8f7823c2b039 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 2e25326c352da..35bb95e0ab66b 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 133dc33e58692..0ca3e0cc4978c 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 13a09bd8f729e..4bab320f65374 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 c5aa6d0a76609..cf3e657a9def6 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 1d786d96d2be6..6a91725afd642 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 92eefcf51c36f..07c12287d7cfa 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 9f39ead6849ec..776866d8dc76e 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 8536e825c5d58..76495802b5793 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 dcdd9b4e6ae7b..57fdbb6c4659c 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 c2ff575ee26aa..5fb5c6909be75 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 8d181d29dfa8c..b594f5420020d 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 cfe7b62e4150b..2a29128c8117b 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 f198fb3f54d7e..4d81ed0850ac9 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 dcdd9b4e6ae7b..57fdbb6c4659c 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 2cab6b993289e..eadefeaac135a 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 2ea20c3f6b254..583c01eda2657 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 a246a08473175..910933b96169d 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 13a09bd8f729e..4bab320f65374 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 209d62c118fcd..70d417ef57928 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 dcdd9b4e6ae7b..57fdbb6c4659c 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 302ff1e74e1ba..46d376e81ad63 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 d77cd124e75c5..e35af77cbf8d9 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}