Horizontal Scrolling using CSS Grid
3 min readDec 19, 2022
In this previous article, I showed how to do horizontal scrolling using flexbox. 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:
It will also include one folder called images. Inside this folder will be five images. The images in the folder are:
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 are the contents of my index.html file:
<!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.
