diff --git a/README.md b/README.md
index 49ce50b..2cca1dc 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,8 @@ items (e.g. 1000+ items) as a grid in a performant way.
 - Just use CSS grid to style your grid. Minimum styling opinions form the
   library.
 - Support using a paginated API to load the items in the background.
-- Support rendering placeholders for unloaded items
+- Support rendering placeholders for unloaded items.
+- Support both vertical and horizontal scroll.
 - Loaded items are cached for better performance.
 
 ## Code Examples
@@ -36,7 +37,7 @@ npm install vue-virtual-scroll-grid
 | `pageProviderDebounceTime` | Debounce window in milliseconds on the calls to `pageProvider`                    | `number`                                                       | Optional, an integer greater than or equal to 0      |
 | `pageSize`                 | The number of items in a page from the item provider (e.g. a backend API)         | `number`                                                       | Required, an integer greater than or equal to 1      |
 | `scrollTo`                 | Scroll to a specific item by index                                                | `number`                                                       | Optional, an integer from 0 to the `length` prop - 1 |
-| `scrollBehavior`           | The behavior of `scrollTo`. Default value is `smooth`                             | `smooth` | `auto`                                              | Optional, a string to be `smooth` or `auto`         |
+| `scrollBehavior`           | The behavior of `scrollTo`. Default value is `smooth`                             | `smooth` | `auto`                                         | Optional, a string to be `smooth` or `auto`         |
 
 Example:
 
@@ -113,6 +114,11 @@ Example:
 </template>
 ```
 
+## Scroll Mode
+
+The library uses `grid-auto-flow` CSS property to infer scroll mode. Set it to
+`column` value if you want to enable horizontal scroll.
+
 ## Caveats
 
 The library does not require items have foreknown width and height, but do
diff --git a/src/Grid.vue b/src/Grid.vue
index cc66f8c..bf1aec4 100644
--- a/src/Grid.vue
+++ b/src/Grid.vue
@@ -1,12 +1,5 @@
 <template>
-  <div
-    v-show="length > 0"
-    ref="rootRef"
-    :style="{
-      height: `${contentHeight}px`,
-      placeContent: 'start',
-    }"
-  >
+  <div v-show="length > 0" ref="rootRef" :style="rootStyles">
     <div
       :style="{
         opacity: 0,
@@ -40,7 +33,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUpdated, PropType, ref } from "vue";
+import {
+  defineComponent,
+  onUpdated,
+  PropType,
+  ref,
+  computed,
+  StyleValue,
+} from "vue";
 import {
   fromProp,
   fromResizeObserver,
@@ -100,7 +100,7 @@ export default defineComponent({
     // data to render
     const {
       buffer$, // the items in the current scanning window
-      contentHeight$, // the height of the whole list
+      contentSize$, // the size of the whole list
       scrollAction$, // the value sent to window.scrollTo()
     } = pipeline({
       // streams of prop
@@ -119,17 +119,28 @@ export default defineComponent({
 
     onUpdated(
       once(() => {
-        scrollAction$.subscribe(([el, top]: ScrollAction) => {
-          el.scrollTo({ top, behavior: props.scrollBehavior });
+        scrollAction$.subscribe(({ target, offset }: ScrollAction) => {
+          target.scrollTo({ ...offset, behavior: props.scrollBehavior });
         });
       })
     );
 
+    const contentSize = useObservable(contentSize$);
+    const rootStyles = computed<StyleValue>(() =>
+      Object.fromEntries([
+        ...Object.entries(contentSize.value ?? {}).map(([property, value]) => [
+          property,
+          value + "px",
+        ]),
+        ["placeContent", "start"],
+      ])
+    );
+
     return {
       rootRef,
       probeRef,
       buffer: useObservable(buffer$),
-      contentHeight: useObservable(contentHeight$),
+      rootStyles,
     };
   },
 });
diff --git a/src/demo/App.vue b/src/demo/App.vue
index 29d7040..da5c792 100644
--- a/src/demo/App.vue
+++ b/src/demo/App.vue
@@ -1,42 +1,46 @@
 <template>
-  <Header />
-
-  <Grid
-    :length="length"
-    :pageSize="pageSize"
-    :pageProvider="pageProvider"
-    :pageProviderDebounceTime="0"
-    :scrollTo="scrollTo"
-    :scrollBehavior="scrollBehavior"
-    :class="$style.grid"
-  >
-    <template v-slot:probe>
-      <ProductItem sizes="(min-width: 768px) 360px, 290px" />
-    </template>
-
-    <template v-slot:placeholder="{ style }">
-      <ProductItem :style="style" sizes="(min-width: 768px) 360px, 290px" />
-    </template>
-
-    <template v-slot:default="{ item, style }">
-      <ProductItem
-        :handle="item.handle"
-        :price="item.price * 100"
-        :compare-at-price="item.compare_at_price * 100"
-        :published-at="new Date(item.published_at)"
-        :style="style"
-        :master-src="item.product_image"
-        :initial-alt-master-src="true"
-        :alt="item.title"
-        sizes="(min-width: 768px) 360px, 290px"
-        :tags="item.tags"
-        :vendor="item.vendor"
-        :title="item.title"
-      />
-    </template>
-  </Grid>
-
-  <Control />
+  <div :class="$style.root">
+    <Header :class="$style.header" />
+
+    <div :class="$style.gridWrapper">
+      <Grid
+        :length="length"
+        :pageSize="pageSize"
+        :pageProvider="pageProvider"
+        :pageProviderDebounceTime="0"
+        :scrollTo="scrollTo"
+        :scrollBehavior="scrollBehavior"
+        :class="[$style.grid, $style[scrollMode]]"
+      >
+        <template v-slot:probe>
+          <ProductItem sizes="(min-width: 768px) 360px, 290px" />
+        </template>
+
+        <template v-slot:placeholder="{ style }">
+          <ProductItem :style="style" sizes="(min-width: 768px) 360px, 290px" />
+        </template>
+
+        <template v-slot:default="{ item, style }">
+          <ProductItem
+            :handle="item.handle"
+            :price="item.price * 100"
+            :compare-at-price="item.compare_at_price * 100"
+            :published-at="new Date(item.published_at)"
+            :style="style"
+            :master-src="item.product_image"
+            :initial-alt-master-src="true"
+            :alt="item.title"
+            sizes="(min-width: 768px) 360px, 290px"
+            :tags="item.tags"
+            :vendor="item.vendor"
+            :title="item.title"
+          />
+        </template>
+      </Grid>
+    </div>
+
+    <Control :class="$style.controls" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -45,7 +49,14 @@ import Grid from "../Grid.vue";
 import Header from "./Header.vue";
 import Control from "./Control.vue";
 import ProductItem from "./ProductItem.vue";
-import { length, pageSize, pageProvider, scrollTo, scrollBehavior } from "./store";
+import {
+  length,
+  pageSize,
+  pageProvider,
+  scrollMode,
+  scrollTo,
+  scrollBehavior
+} from "./store";
 
 export default defineComponent({
   name: "App",
@@ -54,6 +65,7 @@ export default defineComponent({
     length,
     pageSize,
     pageProvider,
+    scrollMode,
     scrollTo,
     scrollBehavior,
   }),
@@ -83,61 +95,106 @@ body {
   background-color: var(--color-white);
 }
 
+.root {
+  display: grid;
+  grid-template: "header" "gridWrapper" 1fr "controls";
+  height: 100vh;
+}
+
+.header {
+  grid-area: header;
+}
+
+.gridWrapper {
+  grid-area: gridWrapper;
+  height: 100%;
+  overflow: auto;
+}
+
+.controls {
+  grid-area: controls;
+}
+
 .grid {
   display: grid;
   padding: 0 1rem;
   grid-gap: 2rem;
-  grid-template-columns: repeat(2, 1fr);
   place-items: start stretch;
+  box-sizing: content-box;
+}
+
+.grid.vertical {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid.horizontal {
+  grid-auto-flow: column;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(2, 1fr);
 }
 
 @media (min-width: 760px) {
   .grid {
     padding: 1.5rem;
     grid-gap: 3rem;
+  }
+
+  .grid.vertical {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
 @media (min-width: 1140px) {
-  .grid {
+  .grid.vertical {
     grid-template-columns: repeat(4, 1fr);
   }
 }
 
 @media (min-width: 1520px) {
-  .grid {
+  .grid.vertical {
     grid-template-columns: repeat(5, 1fr);
   }
 }
 
 @media (min-width: 1900px) {
-  .grid {
+  .grid.vertical {
     grid-template-columns: repeat(6, 1fr);
   }
 }
 
 @media (min-width: 2280px) {
-  .grid {
+  .grid.vertical {
     grid-template-columns: repeat(7, 1fr);
   }
 }
 
 @media (min-width: 2660px) {
-  .grid {
+  .grid.vertical {
     grid-template-columns: repeat(8, 1fr);
   }
 }
 
 @media (min-width: 3040px) {
-  .grid {
+  .grid.vertical {
     grid-template-columns: repeat(9, 1fr);
   }
 }
 
 @media (min-width: 3420px) {
-  .grid {
+  .grid.vertical {
     grid-template-columns: repeat(10, 1fr);
   }
 }
+
+@media (min-height: 721px) {
+  .grid.horizontal {
+    grid-template-rows: repeat(3, 1fr);
+  }
+}
+
+@media (min-height: 1081px) {
+  .grid.horizontal {
+    grid-template-rows: repeat(4, 1fr);
+  }
+}
 </style>
diff --git a/src/demo/Control.vue b/src/demo/Control.vue
index 9083a60..3a6934e 100644
--- a/src/demo/Control.vue
+++ b/src/demo/Control.vue
@@ -68,6 +68,34 @@
       </div>
     </div>
 
+    <div :class="$style.scrollMode">
+      <p :class="$style.category">Scroll mode:</p>
+
+      <div :class="$style.radioList">
+        <label for="vertical" :class="$style.radioLabel">
+          <input
+            type="radio"
+            id="vertical"
+            value="vertical"
+            v-model="scrollMode"
+            :class="$style.radio"
+          />
+          Vertical
+        </label>
+
+        <label for="horizontal" :class="$style.radioLabel">
+          <input
+            type="radio"
+            id="horizontal"
+            value="horizontal"
+            v-model="scrollMode"
+            :class="$style.radio"
+          />
+          Horizontal
+        </label>
+      </div>
+    </div>
+
     <div :class="$style.scrollTo">
       <label for="pageSize" :class="$style.label"> Scroll To: </label>
       <input
@@ -80,8 +108,8 @@
       />
     </div>
 
-    <div :class="$style.scrollBehaviorProvider">
-      <p :class="$style.scrollBehavior">Scroll Behavior:</p>
+    <div :class="$style.scrollBehavior">
+      <p :class="$style.category">Scroll Behavior:</p>
 
       <div :class="$style.radioList">
         <label for="smooth" :class="$style.radioLabel">
@@ -107,18 +135,31 @@
         </label>
       </div>
     </div>
-    
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { collection, length, pageSize, scrollTo, scrollBehavior } from "./store";
+import {
+  collection,
+  length,
+  pageSize,
+  scrollMode,
+  scrollTo,
+  scrollBehavior,
+} from "./store";
 
 export default defineComponent({
   name: "Control",
   setup: () => {
-    return { length, pageSize, collection, scrollTo, scrollBehavior };
+    return {
+      length,
+      pageSize,
+      collection,
+      scrollMode,
+      scrollTo,
+      scrollBehavior,
+    };
   },
 });
 </script>
@@ -135,11 +176,11 @@ export default defineComponent({
 
   display: grid;
   grid-template:
-    "length pageProvider" auto
-    "pageSize pageProvider" auto
-    "scrollTo pageProvider" auto
-    "scrollBehavior pageProvider" auto
-    / 2fr 1fr;
+    "length scrollMode pageProvider" auto
+    "pageSize scrollMode pageProvider" auto
+    "scrollTo scrollMode pageProvider" auto
+    "scrollBehavior scrollMode pageProvider" auto
+    / 2fr 1fr 1fr;
   place-items: center stretch;
   grid-gap: 1.5rem;
 }
@@ -160,11 +201,19 @@ export default defineComponent({
   justify-content: flex-start;
 }
 
+.scrollMode {
+  grid-area: scrollMode;
+  place-self: stretch;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+}
+
 .scrollTo {
   grid-area: scrollTo;
 }
 
-.scrollBehaviorProvider {
+.scrollBehavior {
   grid-area: scrollBehavior;
   place-self: stretch;
   display: flex;
@@ -209,7 +258,7 @@ export default defineComponent({
   font-weight: 700;
 }
 
-.category, .scrollBehavior {
+.category {
   font-weight: 700;
   margin-bottom: 1rem;
 }
@@ -217,11 +266,11 @@ export default defineComponent({
 @media (min-width: 760px) {
   .root {
     grid-template:
-      "length pageSize pageProvider scrollTo scrollBehavior" auto
-      / 2fr 2fr 2fr 1fr 1fr;
+      "length pageSize pageProvider scrollMode scrollTo scrollBehavior" auto
+      / 2fr 2fr 2fr 2fr 1fr 1fr;
   }
 
-  .category, .scrollBehavior {
+  .category {
     margin-bottom: 0.5rem;
   }
 
diff --git a/src/demo/Header.vue b/src/demo/Header.vue
index d37ee4c..09e867a 100644
--- a/src/demo/Header.vue
+++ b/src/demo/Header.vue
@@ -40,7 +40,6 @@ export default defineComponent({
 .root {
   background-color: var(--color-rice);
   padding: 1.5rem;
-  margin-bottom: 1rem;
   display: grid;
   grid-template:
     "title title" auto
diff --git a/src/demo/store.ts b/src/demo/store.ts
index 4585367..a52c497 100644
--- a/src/demo/store.ts
+++ b/src/demo/store.ts
@@ -5,11 +5,16 @@ import { curry, prop } from "ramda";
 export const length = ref<number>(1000);
 export const pageSize = ref<number>(40);
 export const scrollTo = ref<number | undefined>(undefined);
-export const scrollBehavior = ref<string>("smooth");
+
+export type ScrollBehavior = "smooth" | "auto";
+export const scrollBehavior = ref<ScrollBehavior>("smooth");
 
 export type Collection = "" | "all-mens" | "womens-view-all";
 export const collection = ref<Collection>("");
 
+export type ScrollMode = "vertical" | "horizontal";
+export const scrollMode = ref<ScrollMode>("vertical");
+
 export const generalPageProvider = curry(
   (
     collection: Collection,
diff --git a/src/pipeline.test.ts b/src/pipeline.test.ts
index c29c371..e2079a0 100644
--- a/src/pipeline.test.ts
+++ b/src/pipeline.test.ts
@@ -2,9 +2,9 @@ import {
   accumulateAllItems,
   accumulateBuffer,
   callPageProvider,
-  computeHeightAboveWindowOf,
+  computeSpaceBehindWindowOf,
   getBufferMeta,
-  getContentHeight,
+  getContentSize,
   getGridMeasurement,
   getObservableOfVisiblePageNumbers,
   getResizeMeasurement,
@@ -12,16 +12,16 @@ import {
 } from "./pipeline";
 import { TestScheduler } from "rxjs/testing";
 
-describe("computeHeightAboveWindowOf", () => {
+describe("computeSpaceBehindWindowOf", () => {
   // Mock getBoundingClientRect() for jsdom as it always returns:
   // { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }
-  function createMockDiv(top: number): HTMLElement {
+  function createMockDiv(left: number = 0, top: number = 0): HTMLElement {
     const div = document.createElement("div");
     div.getBoundingClientRect = () => ({
       width: 0,
       height: 0,
       top,
-      left: 0,
+      left,
       right: 0,
       bottom: 0,
       x: 0,
@@ -32,48 +32,72 @@ describe("computeHeightAboveWindowOf", () => {
     return div;
   }
 
-  it("returns 0 when the element is below window top", () => {
-    const el = createMockDiv(100);
-    const height = computeHeightAboveWindowOf(el);
+  it("returns 0 space when the element is after window", () => {
+    const el = createMockDiv(100, 200);
+    const space = computeSpaceBehindWindowOf(el);
 
-    expect(height).toBe(0);
+    expect(space).toEqual({ width: 0, height: 0 });
   });
 
-  it("returns the height above window when the element is above window top", () => {
-    const el = createMockDiv(-100);
-    const height = computeHeightAboveWindowOf(el);
+  it("returns the space behind window when the element is before window", () => {
+    const el = createMockDiv(-100, -200);
+    const space = computeSpaceBehindWindowOf(el);
 
-    expect(height).toBe(100);
+    expect(space).toEqual({ width: 100, height: 200 });
   });
 });
 
 function createGridRoot(
   rowGap: string = "10px",
   columnGap: string = "20px",
-  gridTemplateColumns: string = "30px 30px 30px"
+  gridAutoFlow: string = "row",
+  gridTemplateColumns: string = "30px 30px 30px",
+  gridTemplateRows: string = "30px 30px 30px"
 ): HTMLElement {
   const el = document.createElement("div");
-  Object.assign(el.style, { rowGap, columnGap, gridTemplateColumns });
+  Object.assign(el.style, {
+    rowGap,
+    columnGap,
+    gridAutoFlow,
+    gridTemplateColumns,
+    gridTemplateRows,
+  });
 
   return el;
 }
 
 describe("getGridMeasurement", () => {
   it("returns correct grid measurement in numbers", () => {
-    const el = createGridRoot("10px", "20px", "30px 30px 30px");
+    const el = createGridRoot("10px", "20px", "row", "30px 30px 30px", "30px");
     const measurement = getGridMeasurement(el);
 
     expect(measurement).toEqual({
       rowGap: 10,
       colGap: 20,
+      flow: "row",
       columns: 3,
+      rows: 1,
     });
   });
+
+  it("returns correct grid flow when flow is dense", () => {
+    const el = createGridRoot("10px", "20px", "dense");
+    const { flow } = getGridMeasurement(el);
+
+    expect(flow).toBe("row");
+  });
+
+  it("returns correct grid flow when flow contains two words", () => {
+    const el = createGridRoot("10px", "20px", "column dense");
+    const { flow } = getGridMeasurement(el);
+
+    expect(flow).toBe("column");
+  });
 });
 
 describe("getResizeMeasurement", () => {
   it("returns correct grid measurement in numbers", () => {
-    const el = createGridRoot("10px", "20px", "30px 30px 30px");
+    const el = createGridRoot("10px", "20px", "column", "30px", "20px 20px");
 
     const measurement = getResizeMeasurement(el, {
       width: 10,
@@ -89,7 +113,10 @@ describe("getResizeMeasurement", () => {
 
     expect(measurement).toEqual({
       rowGap: 10,
-      columns: 3,
+      colGap: 20,
+      flow: "column",
+      columns: 1,
+      rows: 2,
       itemHeightWithGap: 30,
       itemWidthWithGap: 30,
     });
@@ -97,27 +124,57 @@ describe("getResizeMeasurement", () => {
 });
 
 describe("getBufferMeta", () => {
-  it("returns correct buffer meta data when heightAboveWindow is 0", () => {
-    const meta = getBufferMeta(1000)(0, {
-      columns: 3,
+  function createMockResizeMeasurement(flow: "row" | "column") {
+    return {
+      colGap: 20,
       rowGap: 10,
+      flow,
+      columns: 3,
+      rows: 2,
       itemHeightWithGap: 50,
       itemWidthWithGap: 50,
-    });
+    };
+  }
+
+  it("returns correct buffer meta data when flow is row and space is 0", () => {
+    const space = { width: 0, height: 0 };
+    const meta = getBufferMeta(1000, 1000)(
+      space,
+      createMockResizeMeasurement("row")
+    );
 
     expect(meta).toEqual({ bufferedOffset: 0, bufferedLength: 132 });
   });
 
-  it("returns correct buffer meta data when heightAboveWindow is greater than 0", () => {
-    const meta = getBufferMeta(1000)(5000, {
-      columns: 3,
-      rowGap: 10,
-      itemHeightWithGap: 50,
-      itemWidthWithGap: 50,
-    });
+  it("returns correct buffer meta data when flow is column and space is 0", () => {
+    const space = { width: 0, height: 0 };
+    const meta = getBufferMeta(1000, 1000)(
+      space,
+      createMockResizeMeasurement("column")
+    );
+
+    expect(meta).toEqual({ bufferedOffset: 0, bufferedLength: 88 });
+  });
+
+  it("returns correct buffer meta data when flow is row and space is greater than 0", () => {
+    const space = { width: 5000, height: 5000 };
+    const meta = getBufferMeta(1000, 1000)(
+      space,
+      createMockResizeMeasurement("row")
+    );
 
     expect(meta).toEqual({ bufferedOffset: 267, bufferedLength: 132 });
   });
+
+  it("returns correct buffer meta data when flow is column and space is greater than 0", () => {
+    const space = { width: 5000, height: 5000 };
+    const meta = getBufferMeta(1000, 1000)(
+      space,
+      createMockResizeMeasurement("column")
+    );
+
+    expect(meta).toEqual({ bufferedOffset: 178, bufferedLength: 88 });
+  });
 });
 
 describe("getObservableOfVisiblePageNumbers", () => {
@@ -225,12 +282,15 @@ describe("accumulateAllItems", () => {
 });
 
 describe("getVisibleItems", () => {
-  it("returns correct visible items", () => {
+  it("returns correct visible items when flow is row", () => {
     const visibleItems = getVisibleItems(
       { bufferedOffset: 2, bufferedLength: 2 },
       {
-        columns: 2,
+        colGap: 10,
         rowGap: 10,
+        flow: "row",
+        columns: 2,
+        rows: 2,
         itemHeightWithGap: 50,
         itemWidthWithGap: 60,
       },
@@ -256,6 +316,8 @@ describe("getVisibleItems", () => {
       },
     ]);
   });
+
+  // TODO: test getVisibleItems() when flow is column
 });
 
 describe("accumulateBuffer", () => {
@@ -335,19 +397,31 @@ describe("accumulateBuffer", () => {
   });
 });
 
-describe("getContentHeight", () => {
+describe("getContentSize", () => {
+  function createMockResizeMeasurement(flow: "row" | "column") {
+    return {
+      colGap: 10,
+      rowGap: 10,
+      flow: flow,
+      columns: 5,
+      rows: 5,
+      itemHeightWithGap: 100,
+      itemWidthWithGap: 100,
+    };
+  }
+
+  it("returns correct content width", () => {
+    const measurement = createMockResizeMeasurement("column");
+    const contentSize = getContentSize(measurement, 1000);
+
+    expect(contentSize).toEqual({ width: 19_990 });
+  });
+
   it("returns correct content height", () => {
-    const contentHeight = getContentHeight(
-      {
-        columns: 5,
-        rowGap: 10,
-        itemHeightWithGap: 100,
-        itemWidthWithGap: 100,
-      },
-      1000
-    );
+    const measurement = createMockResizeMeasurement("row");
+    const contentSize = getContentSize(measurement, 1000);
 
-    expect(contentHeight).toBe(19_990);
+    expect(contentSize).toEqual({ height: 19_990 });
   });
 });
 
diff --git a/src/pipeline.ts b/src/pipeline.ts
index 9eeed9b..b99b0b2 100644
--- a/src/pipeline.ts
+++ b/src/pipeline.ts
@@ -34,18 +34,28 @@ import {
   without,
   zip,
 } from "ramda";
-import { getVerticalScrollParent } from "./utilites";
+import { getScrollParents } from "./utilites";
 
-export function computeHeightAboveWindowOf(el: Element): number {
-  const top = el.getBoundingClientRect().top;
+interface SpaceBehindWindow {
+  width: number;
+  height: number;
+}
+
+export function computeSpaceBehindWindowOf(el: Element): SpaceBehindWindow {
+  const { left, top } = el.getBoundingClientRect();
 
-  return Math.abs(Math.min(top, 0));
+  return {
+    width: Math.abs(Math.min(left, 0)),
+    height: Math.abs(Math.min(top, 0)),
+  };
 }
 
 interface GridMeasurement {
   colGap: number;
   rowGap: number;
+  flow: "row" | "column";
   columns: number;
+  rows: number;
 }
 
 export function getGridMeasurement(rootEl: Element): GridMeasurement {
@@ -54,14 +64,17 @@ export function getGridMeasurement(rootEl: Element): GridMeasurement {
   return {
     rowGap: parseInt(computedStyle.getPropertyValue("row-gap")) || 0,
     colGap: parseInt(computedStyle.getPropertyValue("column-gap")) || 0,
+    flow: computedStyle.getPropertyValue("grid-auto-flow").startsWith("column")
+      ? "column"
+      : "row",
     columns: computedStyle.getPropertyValue("grid-template-columns").split(" ")
       .length,
+    rows: computedStyle.getPropertyValue("grid-template-rows").split(" ")
+      .length,
   };
 }
 
-interface ResizeMeasurement {
-  rowGap: number;
-  columns: number;
+interface ResizeMeasurement extends GridMeasurement {
   itemHeightWithGap: number;
   itemWidthWithGap: number;
 }
@@ -70,11 +83,14 @@ export function getResizeMeasurement(
   rootEl: Element,
   { height, width }: DOMRectReadOnly
 ): ResizeMeasurement {
-  const { rowGap, colGap, columns } = getGridMeasurement(rootEl);
+  const { colGap, rowGap, flow, columns, rows } = getGridMeasurement(rootEl);
 
   return {
+    colGap,
     rowGap,
+    flow,
     columns,
+    rows,
     itemHeightWithGap: height + rowGap,
     itemWidthWithGap: width + colGap,
   };
@@ -86,20 +102,50 @@ interface BufferMeta {
 }
 
 export const getBufferMeta =
-  (windowInnerHeight: number = window.innerHeight) =>
   (
-    heightAboveWindow: number,
-    { columns, rowGap, itemHeightWithGap }: ResizeMeasurement
+    windowInnerWidth: number = window.innerWidth,
+    windowInnerHeight: number = window.innerHeight
+  ) =>
+  (
+    { width: widthBehindWindow, height: heightBehindWindow }: SpaceBehindWindow,
+    {
+      colGap,
+      rowGap,
+      flow,
+      columns,
+      rows,
+      itemHeightWithGap,
+      itemWidthWithGap,
+    }: ResizeMeasurement
   ): BufferMeta => {
-    const rowsInView =
-      itemHeightWithGap &&
-      Math.ceil((windowInnerHeight + rowGap) / itemHeightWithGap) + 1;
-    const length = rowsInView * columns;
-
-    const rowsBeforeView =
-      itemHeightWithGap &&
-      Math.floor((heightAboveWindow + rowGap) / itemHeightWithGap);
-    const offset = rowsBeforeView * columns;
+    let crosswiseLines;
+    let gap;
+    let itemSizeWithGap;
+    let windowInnerSize;
+    let spaceBehindWindow;
+    if (flow === "row") {
+      crosswiseLines = columns;
+      gap = rowGap;
+      itemSizeWithGap = itemHeightWithGap;
+      windowInnerSize = windowInnerHeight;
+      spaceBehindWindow = heightBehindWindow;
+    } else {
+      crosswiseLines = rows;
+      gap = colGap;
+      itemSizeWithGap = itemWidthWithGap;
+      windowInnerSize = windowInnerWidth;
+      spaceBehindWindow = widthBehindWindow;
+    }
+
+    const linesInView =
+      itemSizeWithGap &&
+      Math.ceil((windowInnerSize + gap) / itemSizeWithGap) + 1;
+    const length = linesInView * crosswiseLines;
+
+    const linesBeforeView =
+      itemSizeWithGap &&
+      Math.floor((spaceBehindWindow + gap) / itemSizeWithGap);
+    const offset = linesBeforeView * crosswiseLines;
     const bufferedOffset = Math.max(offset - Math.floor(length / 2), 0);
     const bufferedLength = length * 2;
 
@@ -166,6 +212,34 @@ export function accumulateAllItems(
   )(allItems);
 }
 
+interface ItemOffset {
+  x: number;
+  y: number;
+}
+
+export function getItemOffsetByIndex(
+  index: number,
+  {
+    flow,
+    columns,
+    rows,
+    itemWidthWithGap,
+    itemHeightWithGap,
+  }: ResizeMeasurement
+): ItemOffset {
+  let x;
+  let y;
+  if (flow === "row") {
+    x = (index % columns) * itemWidthWithGap;
+    y = Math.floor(index / columns) * itemHeightWithGap;
+  } else {
+    x = Math.floor(index / rows) * itemWidthWithGap;
+    y = (index % rows) * itemHeightWithGap;
+  }
+
+  return { x, y };
+}
+
 export interface InternalItem {
   index: number;
   value: unknown | undefined;
@@ -174,15 +248,14 @@ export interface InternalItem {
 
 export function getVisibleItems(
   { bufferedOffset, bufferedLength }: BufferMeta,
-  { columns, itemWidthWithGap, itemHeightWithGap }: ResizeMeasurement,
+  resizeMeasurement: ResizeMeasurement,
   allItems: unknown[]
 ): InternalItem[] {
   return pipe<unknown[][], unknown[], InternalItem[]>(
     slice(bufferedOffset, bufferedOffset + bufferedLength),
     addIndex(ramdaMap)((value, localIndex) => {
       const index = bufferedOffset + localIndex;
-      const x = (index % columns) * itemWidthWithGap;
-      const y = Math.floor(index / columns) * itemHeightWithGap;
+      const { x, y } = getItemOffsetByIndex(index, resizeMeasurement);
 
       return {
         index,
@@ -217,11 +290,26 @@ export function accumulateBuffer(
   )(buffer);
 }
 
-export function getContentHeight(
-  { columns, rowGap, itemHeightWithGap }: ResizeMeasurement,
+interface ContentSize {
+  width?: number;
+  height?: number;
+}
+
+export function getContentSize(
+  {
+    colGap,
+    rowGap,
+    flow,
+    columns,
+    rows,
+    itemWidthWithGap,
+    itemHeightWithGap,
+  }: ResizeMeasurement,
   length: number
-): number {
-  return itemHeightWithGap * Math.ceil(length / columns) - rowGap;
+): ContentSize {
+  return flow === "row"
+    ? { height: itemHeightWithGap * Math.ceil(length / columns) - rowGap }
+    : { width: itemWidthWithGap * Math.ceil(length / rows) - colGap };
 }
 
 interface PipelineInput {
@@ -235,11 +323,19 @@ interface PipelineInput {
   scrollTo$: Observable<number | undefined>;
 }
 
-export type ScrollAction = [Element, number];
+interface ScrollOffset {
+  left?: number;
+  top?: number;
+}
+
+export type ScrollAction = {
+  target: Element;
+  offset: ScrollOffset;
+};
 
 interface PipelineOutput {
   buffer$: Observable<InternalItem[]>;
-  contentHeight$: Observable<number>;
+  contentSize$: Observable<ContentSize>;
   scrollAction$: Observable<ScrollAction>;
 }
 
@@ -254,19 +350,19 @@ export function pipeline({
   scrollTo$,
 }: PipelineInput): PipelineOutput {
   // region: measurements of the visual grid
-  const heightAboveWindow$: Observable<number> = merge(
+  const spaceBehindWindow$: Observable<SpaceBehindWindow> = merge(
     rootResize$,
     scroll$
-  ).pipe(map(computeHeightAboveWindowOf), distinctUntilChanged());
+  ).pipe(map(computeSpaceBehindWindowOf), distinctUntilChanged());
 
   const resizeMeasurement$: Observable<ResizeMeasurement> = combineLatest(
     [rootResize$, itemRect$],
     getResizeMeasurement
   ).pipe(distinctUntilChanged<ResizeMeasurement>(equals));
 
-  const contentHeight$: Observable<number> = combineLatest(
+  const contentSize$: Observable<ContentSize> = combineLatest(
     [resizeMeasurement$, length$],
-    getContentHeight
+    getContentSize
   );
   // endregion
 
@@ -279,11 +375,11 @@ export function pipeline({
           take(1)
         )
     ),
-    map<[number, ResizeMeasurement, Element], ScrollAction>(
-      ([scrollTo, { columns, itemHeightWithGap }, rootEl]) => {
-        const verticalScrollEl = getVerticalScrollParent(rootEl);
-
-        const computedStyle = window.getComputedStyle(rootEl);
+    map<[number, ResizeMeasurement, Element], ScrollAction[]>(
+      ([scrollTo, resizeMeasurement, rootEl]) => {
+        const { vertical: verticalScrollEl, horizontal: horizontalScrollEl } =
+          getScrollParents(rootEl);
+        const computedStyle = getComputedStyle(rootEl);
 
         const gridPaddingTop = parseInt(
           computedStyle.getPropertyValue("padding-top")
@@ -292,30 +388,51 @@ export function pipeline({
           computedStyle.getPropertyValue("border-top")
         );
 
+        const gridPaddingLeft = parseInt(
+          computedStyle.getPropertyValue("padding-left")
+        );
+        const gridBoarderLeft = parseInt(
+          computedStyle.getPropertyValue("border-left")
+        );
+
+        const leftToGridContainer =
+          rootEl instanceof HTMLElement &&
+          horizontalScrollEl instanceof HTMLElement
+            ? rootEl.offsetLeft - horizontalScrollEl.offsetLeft
+            : 0;
+
         const topToGridContainer =
           rootEl instanceof HTMLElement &&
           verticalScrollEl instanceof HTMLElement
             ? rootEl.offsetTop - verticalScrollEl.offsetTop
             : 0;
 
-        // The offset within the scroll container
+        const { x, y } = getItemOffsetByIndex(scrollTo, resizeMeasurement);
+
+        const scrollLeft =
+          x + leftToGridContainer + gridPaddingLeft + gridBoarderLeft;
         const scrollTop =
-          // row count * row height
-          Math.floor(scrollTo / columns) * itemHeightWithGap +
-          // top to the scroll container
-          topToGridContainer +
-          // the padding + boarder top of grid
-          gridPaddingTop +
-          gridBoarderTop;
-        return [verticalScrollEl, scrollTop];
+          y + topToGridContainer + gridPaddingTop + gridBoarderTop;
+
+        return [
+          {
+            target: verticalScrollEl,
+            offset: { top: scrollTop },
+          },
+          {
+            target: horizontalScrollEl,
+            offset: { left: scrollLeft },
+          },
+        ];
       }
-    )
+    ),
+    mergeAll()
   );
   // endregion
 
   // region: rendering buffer
   const bufferMeta$: Observable<BufferMeta> = combineLatest(
-    [heightAboveWindow$, resizeMeasurement$],
+    [spaceBehindWindow$, resizeMeasurement$],
     getBufferMeta()
   ).pipe(distinctUntilChanged<BufferMeta>(equals));
 
@@ -352,5 +469,5 @@ export function pipeline({
   ).pipe(scan(accumulateBuffer, []));
   // endregion
 
-  return { buffer$, contentHeight$, scrollAction$: scrollAction$ };
+  return { buffer$, contentSize$, scrollAction$: scrollAction$ };
 }
diff --git a/src/utilites.ts b/src/utilites.ts
index 403745d..e91b3c4 100644
--- a/src/utilites.ts
+++ b/src/utilites.ts
@@ -64,19 +64,31 @@ export function useObservable<H>(observable: Observable<H>): Readonly<Ref<H>> {
   return valueRef as Readonly<Ref<H>>;
 }
 
-export function getVerticalScrollParent(
+interface ScrollParents {
+  vertical: Element;
+  horizontal: Element;
+}
+
+export function getScrollParents(
   element: Element,
   includeHidden: boolean = false
-): Element {
+): ScrollParents {
   const style = getComputedStyle(element);
+
+  if (style.position === "fixed") {
+    return {
+      vertical: document.body,
+      horizontal: document.body,
+    };
+  }
+
   const excludeStaticParent = style.position === "absolute";
   const overflowRegex = includeHidden
     ? /(auto|scroll|hidden)/
     : /(auto|scroll)/;
 
-  if (style.position === "fixed") {
-    return document.body;
-  }
+  let vertical;
+  let horizontal;
 
   for (
     let parent: Element | null = element;
@@ -85,13 +97,22 @@ export function getVerticalScrollParent(
   ) {
     const parentStyle = getComputedStyle(parent);
 
-    if (excludeStaticParent && parentStyle.position === "static") {
-      continue;
+    if (excludeStaticParent && parentStyle.position === "static") continue;
+
+    if (!horizontal && overflowRegex.test(parentStyle.overflowX)) {
+      horizontal = parent;
+      if (vertical) return { vertical, horizontal };
     }
 
-    if (overflowRegex.test(parentStyle.overflow + parentStyle.overflowY))
-      return parent;
+    if (!vertical && overflowRegex.test(parentStyle.overflowY)) {
+      vertical = parent;
+      if (horizontal) return { vertical, horizontal };
+    }
   }
 
-  return document.scrollingElement || document.documentElement;
+  const fallback = document.scrollingElement || document.documentElement;
+  return {
+    vertical: vertical ?? fallback,
+    horizontal: horizontal ?? fallback,
+  };
 }