Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a responsive image gallery with CSS

CSS Web Development Front End Technology

A responsive image gallery adapts to different screen sizes using CSS media queries and flexible layouts. This allows images to display properly on desktop, tablet, and mobile devices by adjusting the number of columns and image sizes automatically.

Syntax

.gallery-container {
    width: percentage;
    float: left;
}

@media only screen and (max-width: breakpoint) {
    .gallery-container {
        width: new-percentage;
    }
}

Example

The following example creates a responsive image gallery that shows 4 columns on desktop, 2 on tablets, and 1 on mobile devices −

<!DOCTYPE html>
<html>
<head>
<style>
    .gallery-item {
        padding: 0 6px;
        float: left;
        width: 24.99999%;
        box-sizing: border-box;
    }
    
    .gallery-box {
        border: 2px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        transition: border-color 0.3s ease;
    }
    
    .gallery-box:hover {
        border-color: #007bff;
    }
    
    .gallery-box img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
    }
    
    .description {
        padding: 15px;
        text-align: center;
        background-color: #f9f9f9;
        font-weight: bold;
    }
    
    /* Tablet view: 2 columns */
    @media only screen and (max-width: 700px) {
        .gallery-item {
            width: 49.99999%;
            margin-bottom: 10px;
        }
    }
    
    /* Mobile view: 1 column */
    @media only screen and (max-width: 500px) {
        .gallery-item {
            width: 100%;
        }
    }
    
    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }
</style>
</head>
<body>
    <div class="gallery-item">
        <div class="gallery-box">
            <img src="https://via.placeholder.com/300x200/ff6b6b/ffffff?text=Image+1" alt="Sample Image 1">
            <div class="description">Nature Photography</div>
        </div>
    </div>
    
    <div class="gallery-item">
        <div class="gallery-box">
            <img src="https://via.placeholder.com/300x200/4ecdc4/ffffff?text=Image+2" alt="Sample Image 2">
            <div class="description">City Architecture</div>
        </div>
    </div>
    
    <div class="gallery-item">
        <div class="gallery-box">
            <img src="https://via.placeholder.com/300x200/45b7d1/ffffff?text=Image+3" alt="Sample Image 3">
            <div class="description">Ocean Waves</div>
        </div>
    </div>
    
    <div class="gallery-item">
        <div class="gallery-box">
            <img src="https://via.placeholder.com/300x200/f9ca24/ffffff?text=Image+4" alt="Sample Image 4">
            <div class="description">Mountain View</div>
        </div>
    </div>
    
    <div class="clearfix"></div>
</body>
</html>

A responsive image gallery displays with 4 columns on desktop screens. Images have borders that change color on hover, with descriptive text below each image. On smaller screens, the layout automatically adjusts to 2 columns (tablets) or 1 column (mobile).

Key Features

Feature Description
object-fit: cover Maintains image aspect ratio while filling the container
box-sizing: border-box Includes padding and borders in element width calculation
@media queries Define different layouts for various screen sizes
clearfix Clears floating elements to prevent layout issues

Conclusion

CSS responsive image galleries use percentage-based widths and media queries to create flexible layouts. The combination of floated elements and responsive breakpoints ensures optimal viewing across all devices.

Updated on: 2026-03-15T12:30:30+05:30

489 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements