How can I create a responsive product gallery using HTML and CSS?

HTML & CSS
,
1

Hello, my name is Ankit. I’m trying to build a web page to showcase products in a gallery format. I’m new to web development and I’m not sure how to structure the HTML or style it with CSS so that the gallery looks good on both mobile and desktop screens. Can someone explain the best way to create a clean, responsive product gallery?

1 Like
2

Hi Ankit, and welcome!

It’s unlikely that somebody here will build the page for you, but I can offer some tips.

Start by learning the basics of HTML and CSS. This foundation will make everything else much easier. For a product gallery, structure your markup semantically. You might use a <section> for the gallery itself, and wrap each product in a <figure> with a <figcaption> for its name or description. Then use CSS Grid or Flexbox to lay out the items and make them responsive. Relative units (%, em, rem) and media queries will help the design adapt to different screen sizes.

ChatGPT can be a great tool to get started and to generate examples, but you’ll get the most out of it once you’ve got the fundamentals under your belt. That way, you’ll understand what the code does and how to adapt it.

3

There are plenty of tutorials out there, but here are a few links for you.

I would recommend looking through Kevin Powell’s other videos.

3 Likes
4

A lightbox example

I just did a google search for ‘lightbox no jquery’. I wanted to find a lightweight ready made script that could help me build a light box gallery example.

The first one that caught my eye was simplelightbox

I’m not using nodejs and just want the scripts so did another search for ‘simplelightbox cdn’, which brought me to this link.
https://cdnjs.com/libraries/simplelightbox

The two scripts I grabbed were
Javascript
https://cdnjs.cloudflare.com/ajax/libs/simplelightbox/2.14.3/simple-lightbox.min.js

CSS
https://cdnjs.cloudflare.com/ajax/libs/simplelightbox/2.14.3/simple-lightbox.min.css

I followed the examples from the simplelightbox page

<div class="gallery">
    <a href="images/image1.jpg"><img src="images/thumbs/thumb1.jpg" alt="" title=""/></a>
    <a href="images/image2.jpg"><img src="images/thumbs/thumb2.jpg" alt="" title="Beautiful Image"/></a>
</div>

Adding containers and wrapping card divs.

HTML

<div class="container">
    <div class="gallery cards">
        <div class="card">
            <a href="https://assets.codepen.io/3351103/random__image_01.jpg">
                <img 
                     src="https://assets.codepen.io/3351103/random__image_01.jpg" 
                     alt="view from beach of a pier, the sea and sunset" 
                     title="Looking out to sea"
                />
            </a>
        </div>
        <div class="card">
            <a href="https://assets.codepen.io/3351103/random__image_02.jpg">
                <img 
                     src="https://assets.codepen.io/3351103/random__image_02.jpg" 
                     alt="fluffy goat on the rocky mountains" 
                     title="Rocky mountain goat"
                />
            </a>
        </div>
        <div class="card">
            <a href="https://assets.codepen.io/3351103/random__image_03.jpg">
                <img 
                     src="https://assets.codepen.io/3351103/random__image_03.jpg" 
                     alt="looking up at an ornate dome skylight" 
                     title="Dome skylight"
                />
            </a>
        </div>
        <div class="card">
            <a href="https://assets.codepen.io/3351103/random__image_04.jpg">
                <img 
                     src="https://assets.codepen.io/3351103/random__image_04.jpg" 
                     alt="View of a New York Street" 
                     title="New York Street"
                />
            </a>
        </div>
    </div>
</div>

For the CSS I used grid and auto-fit

CSS

/* reset css from https://piccalil.li/blog/a-more-modern-css-reset/ */
@import "https://assets.codepen.io/3351103/__modern-reset.css";

body {
    padding: 3rem;
}

.container {
    width: 100%;
    max-width: 1024px;
    margin-inline: auto;
}

.cards {
    display: grid;
    /* grid auto-fit, when images shrink to 250px they break on to new lines */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

The javascript was very simple

window.addEventListener('DOMContentLoaded', (event) => {
  // create a new instance of SimpleLightbox passing in gallery links
  const gallery = new SimpleLightbox('.gallery a');  
})

Demo

This was relatively quick to make. I would still recommend going through Kevin Powell’s videos though :slight_smile:

2 Likes
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.