Horizontal Scrolling using CSS Grid
Tags: css, flexbox, tutorial, programming
Published: 2022-12-19 01:53:54

---
title: Horizontal Scrolling using CSS Grid
published: true
description: How to implement horizontal scrolling using CSS Grid
tags: CSS, Flexbox, Tutorial, programming
cover_image: https://res.cloudinary.com/ratracegrad/image/upload/v1671414511/Screenshot_2022-12-18_at_8.41.12_PM_az9xee.png
canonical_url: https://www.jenniferbland.com/horizontal-scrolling-using-css-grid/
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-19 01:50 +0000
---

 In this previous article, I showed [how to do horizontal scrolling using flexbox](https://wp.me/p3sG15-pv). I was recently asked how to do the same scrolling but using CSS Grid instead. This article shows you how to do horizontal scrolling using CSS Grid.

## Setting up my project

This project will contain the following files:

*   index.html
    
*   style.css
    

It will also include one folder called `images`. Inside this folder will be five images. The images in the folder are:

*   image1.jpg
    
*   image2.jpg
    
*   image3.jpg
    
*   image4.jpg
    
*   image5.jpg
    

## Our basic website

The `index.html` file contains the code for our basic website. It will display our five images in a horizontal scroll.

Here is the contents of my `index.html` file:

```html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Grid Horizontal Scroll</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <img src="images/image1.jpg" alt="image1">
    <img src="images/image2.jpg" alt="image2">
    <img src="images/image3.jpg" alt="image3">
    <img src="images/image4.jpg" alt="image4">
    <img src="images/image5.jpg" alt="image5">
    <!-- more images -->
</div>
</body>
</html>
```

Let's walk through this code. In the `head` I have a link to my `style.css` file. I will cover this file later.

The body of the website contains a `div` with a.class of `container`.

Inside the div are five `img` elements that point to the five images located in the `images` folder.

That is it for our `index.html` file.

## Adding horizontal scrolling of images

The secret sauce of making the images scroll horizontally is our CSS code.

Here is the code in the `style.css` file:

```css
.container {
    display: grid;
    grid-auto-columns: calc(100% - 4rem);
    grid-auto-flow: column;
    grid-gap: 16px;
    overflow-x: auto;
}

.container img {
    width: 100%;
    height: auto;
}
```

Let's walk through this code.

`display: grid;` - This sets the container element to be a grid container, which means that its child elements will be placed onto a grid of rows and columns.

`grid-auto-columns: calc(100% - 4rem);` - This sets the width of any additional columns that are created in the grid to be the full width of the container minus 4rem (which is the same as 64px if the root font size is 16px).

`grid-auto-flow: column;` - This specifies that new rows should be created as new columns, rather than as new rows.

`grid-gap: 16px;` - This sets the gap between the grid cells to be 16px.

`overflow-x: auto;` - This causes a horizontal scrollbar to be displayed if the content of the grid overflows the container element horizontally.

`.container img { width: 100%; height: auto; }` - This sets the width of all img elements that are children of the .container element to be 100% of their parent element's width, and sets their height to be automatically calculated based on their aspect ratio.

## Working Code

Here is an animated gif showing our horizontal scroll.

![Horizontal Scrolling using CSS Grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pt1g0ggh6dd8pxotp0b.gif)

## Conclusion

Wanted to take the time to show how to do horizontal scrolling using CSS Grid. If you want to see [how to do this using Flexbox check out my other article](https://wp.me/p3sG15-pv).