diff --git a/core/src/components/picker-column/picker-column.scss b/core/src/components/picker-column/picker-column.scss
index 3e0a1937ae..b30cc70825 100644
--- a/core/src/components/picker-column/picker-column.scss
+++ b/core/src/components/picker-column/picker-column.scss
@@ -33,6 +33,17 @@
   display: none;
 }
 
+::slotted(ion-picker-column-option) {
+  display: block;
+
+  scroll-snap-align: center;
+}
+
+.picker-item-empty,
+:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled) {
+  scroll-snap-align: none;
+}
+
 :host .picker-item {
   @include padding(0);
   @include margin(0);
diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index f615eed530..e5fd1baa71 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -450,37 +450,7 @@ export class PickerColumn implements ComponentInterface {
         <div class="picker-item picker-item-empty" aria-hidden="true">
           &nbsp;
         </div>
-        {items.map((item, index) => {
-          const isItemDisabled = pickerDisabled || item.disabled || false;
-
-          {
-            /*
-            Users should be able to tab
-            between multiple columns. As a result,
-            we set tabindex here so that tabbing switches
-            between columns instead of buttons. Users
-            can still use arrow keys on the keyboard to
-            navigate the column up and down.
-          */
-          }
-          return (
-            <button
-              tabindex="-1"
-              class={{
-                'picker-item': true,
-              }}
-              data-value={item.value}
-              data-index={index}
-              onClick={(ev: Event) => {
-                this.centerPickerItemInView(ev.target as HTMLElement, true);
-              }}
-              disabled={isItemDisabled}
-              part={PICKER_ITEM_PART}
-            >
-              {item.text}
-            </button>
-          );
-        })}
+        <slot></slot>
         <div class="picker-item picker-item-empty" aria-hidden="true">
           &nbsp;
         </div>
@@ -495,6 +465,6 @@ export class PickerColumn implements ComponentInterface {
   }
 }
 
-const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
+const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
 const PICKER_ITEM_PART = 'wheel-item';
 const PICKER_ITEM_ACTIVE_PART = 'active';