How to create an image gallery with a horizontal scrollbar using CSS ?

Last Updated : 23 Jul, 2024

In this article, we will learn how to create an image gallery with a horizontal scrollbar using CSS. It provides a way to navigate through a set of images, on scroll horizontally to view different pictures. This effect is helpful when space optimization of the web page is a concern that efficiently utilizes the horizontal space for displaying a larger number of images.

Table of Content

Using White-space and Overflow-x
Using Flexbox properties and Overflow-x

Using White-space and Overflow-x

The `white-space` is used to control text wrapping and spacing within an element, while `overflow-x` manages horizontal content overflow, enabling options like hiding, scrollbar display, or container expansion.

Approach

Create the basic structure of the web page with heading element, <div>, and <img>. Link the external stylesheet that defines styles for the body, headings, the main gallery container, and individual images.
Use the Google Fonts and import the 'Poppins' font for the text. All the images have style with fixed width, height, and margins having rounded corners and a border.
The gallery container element has the class name "gallerybox" has the property white-space with nowrap to prevent text wrapping and set the property overflow-x to auto for providing a horizontal scrollbar when needed.
The property margin-right specifies the margin between the images.

Example: The example illustrates how to create an image gallery with a horizontal scrollbar using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>
        Image gallery with a horizontal
        scrollbar using CSS
    </title>
    <link rel="stylesheet" 
          href="index.css">
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>
         Image gallery with a horizontal
        scrollbar White-space and Overflow-x
        CSS properties.
    </h3>
    <div class="gallerybox">
        <div class="imgbox">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp"
                alt="Img1">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210713211702/System-Design-Tutorial.png"
                alt="Img2">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104145854/1.gif"
                alt="Img3">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104145726/1.webp"
                alt="Img4">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp"
                alt="Img5">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104150015/1.png"
                alt="Img6">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104150015/1.png"
                alt="Img7">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104150426/1.webp"
                alt="Img8">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp"
                alt="Img9">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104150505/1.png"
                alt="Img10">
        </div>
    </div>
</body>

</html>

CSS

@import 
url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

h1 {
    color: rgb(41, 107, 41);
    text-align: center;
}

h3 {
    text-align: center;
}

.gallerybox {
    white-space: nowrap;
    overflow-x: auto;
}

.imgbox img {
    width: 400px;
    height: 200px;
    margin-right: 5px;
    border-radius: 20px;
    border: 2px solid rgb(138, 138, 128);
}

Output

Using Flexbox properties and Overflow-x

Flexbox properties, such as 'display: flex and 'justify-content', helps in arrangement of elements, while `overflow-x` manages horizontal content overflow, offering options like hiding, scrollbar display, or container expansion.

Approach

Create the basic structure of the web page with heading element, <div>, and <img>. Link the external stylesheet that defines styles for the body, headings, the main gallery container, and individual images.
Use the Google Fonts and import the 'Poppins' font for the text. All the images have style with fixed width, height, and margins having rounded corners and a border.
The gallery container element has the class name "gallerybox" has the property overflow-x to auto for providing a horizontal scrollbar when needed.
The property margin-right specifies the margin between the images. The element having class imgbox have the property display with flex to prevent text wrapping and flex-wrap with no-wrap to avoid wrapping images on smaller screen sizes.

Example: The example illustrates how to create an image gallery with a horizontal scrollbar using CSS properties.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>
         Image gallery with a horizontal
        scrollbar using CSS
    </title>
    <link rel="stylesheet" 
          href="index.css">
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>
         Image gallery with a horizontal
        scrollbar using CSS with Flexbox properties
    </h3>
    <div class="gallerybox">
        <div class="imgbox">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155817/1.webp" 
                 alt="Img1">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155842/1.png" 
                 alt="Img2">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155909/1.gif" 
                 alt="Img3">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155934/1.webp" 
                 alt="Img4">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155817/1.webp" 
                 alt="Img5">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155842/1.png" 
                 alt="Img6">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155909/1.gif" 
                 alt="Img7">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155934/1.webp" 
                 alt="Img8">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155934/1.webp" 
                 alt="Img9">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155842/1.png" 
                 alt="Img10">
        </div>
    </div>
</body>

</html>

CSS

@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

h1 {
    color: rgb(41, 107, 41);
    text-align: center;
}

h3 {
    text-align: center;
}

.gallerybox {
    overflow-x: auto;
}

.imgbox img {
    width: 400px;
    height: 200px;
    margin-right: 5px;
    border-radius: 20px;
    border: 2px solid rgb(138, 138, 128);
}

.imgbox {
    display: flex;
    flex-wrap: nowrap;
}

Output:

How to create Horizontal Scroll Snap Using HTML and CSS ?

shivanigupta18rk

Improve

Article Tags :

How to create an image gallery with a horizontal scrollbar using CSS ?

Using White-space and Overflow-x

Approach

Using Flexbox properties and Overflow-x

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?

Log in

Create Account