• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Image Gallery

← Previous Next →

🔹 What is a CSS Image Gallery?

A CSS Image Gallery is a visual arrangement of multiple images in a grid or flexible layout on a web page. It allows users to view, interact with, and explore images in an organized and aesthetic way using only HTML and CSS (no JavaScript required for basic functionality).

🔸 Key Layout Techniques

CSS image galleries can be created using:

  • Flexbox – 1D layout with row or column wrapping

  • Grid – 2D layout with rows and columns

  • Float – Older method (less flexible)

  • Media Queries – For responsive galleries

🔸 Basic Example: Responsive Grid Gallery

<div class="gallery">
  <img src="img1.jpg" alt="">
  <img src="img2.jpg" alt="">
  <img src="img3.jpg" alt="">
  <img src="img4.jpg" alt="">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

🔸 Flexbox Gallery Example

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery img {
  width: calc(33.33% - 10px);
}

🔸 Responsive Image Gallery with Media Queries

@media screen and (max-width: 768px) {
  .gallery img {
    width: 48%;
  }
}

@media screen and (max-width: 480px) {
  .gallery img {
    width: 100%;
  }
}

Practice Questions

✅ Write CSS for the following:

Q1. Create a responsive 3-column image gallery using Grid.

Q2. Add spacing between gallery items using gap.

Q3. Add rounded corners to gallery images.

Q4. Create a hover effect to scale the image.

Q5. Display image captions over the images.

Q6. Make a flex-based image gallery.

Q7. Set all images to the same height using object-fit.

Q8. Use media queries to change layout on mobile.

Q9. Create a gallery with a border around each image.

Q10. Add a shadow effect to gallery images.

CSS Image Gallery Quiz

Q1: Which CSS property creates a grid layout?

A. flex-direction
B. display: grid;
C. position: absolute;
D. grid-align

Q2: How do you make gallery images flexible in width?

A. width: 100px;
B. width: 100%;
C. width: auto;
D. min-width: none;

Q3: Which unit makes galleries responsive automatically?

A. px
B. % or fr
C. em
D. pt

Q4: What does flex-wrap: wrap; do?

A. Allows items to go to next row
B. Aligns all items center
C. Removes wrapping
D. Fixes the image size

Q5: How do you apply spacing in CSS Grid?

A. gap:
B. margin:
C. padding:
D. flex-gap:

Q6: Which property is used to round image corners?

A. outline:
B. border-radius:
C. box-shadow:
D. overflow: hidden;

Q7: Which value helps maintain image proportion?

A. height: auto;
B. width: auto;
C. min-height:
D. overflow: scroll;

Q8: Which media query targets screens less than 480px wide?

A. @media phone
B. @media screen and (max-width: 480px)
C. @screen max-480
D. @responsive small

Q9: What does object-fit: cover; do to images in a gallery?

A. Fills container without distortion, crops excess
B. Stretches image
C. Shrinks image
D. Applies zoom effect

Q10: Which layout system allows both rows and columns?

A. Flexbox
B. CSS Grid
C. Float
D. Inline-block
← Previous Next →
Login
Go Back Top