Home CSS & CSS3 Simplest Image Vanilla Gallery Built with CSS Grid

Simplest Image Vanilla Gallery Built with CSS Grid

CSS & CSS3 webcodeflow · October 15, 2022 · 0 Comment

Vanilla Gallery is the simplest image gallery built with CSS Grid for those who want their website image gallery to be fast and simple because it’s better that way.

Custom Category 🎨

This project includes custom categories that you can use to make your gallery even better than before 😃

Large (Large) This category is for a 2 * 2 block image (only for the first image).
Double Row (Double Row) With this class, you can assign a two-row image to the third column. (You can also enable it for other columns).
Double Column (Double Column) With this class you can assign images to two columns.

How to make use of it:

1. Load the gallery stylesheet within the doc.

<!-- Default -->
<link rel="stylesheet" href="./Gallery.css" />

<!-- Allows Double Row -->
<link rel="stylesheet" href="./Gallery-OCO.css" />

<!-- Disable resizing container -->
<link rel="stylesheet" href="./RO/Gallery.css" />

<!-- Disable resizing container -->
<!-- Allows Double Row -->
<link rel="stylesheet" href="./RO/Gallery.css" />

2. Add your images to the picture gallery:

<div class="gallery">
  <div class="double-column">
    <img src="images/1.webp">
  </div>
  <div class="double-row">
    <img src="images/2.jpg">
  </div>
  <div>
    <img src="images/3.jpg">
  </div>
  <div>
    <img src="images/4.jpg">
  </div>
  ...
</div>

Simple Fast Photo Gallery Using CSS Grid, Vanilla Gallery Plugin/Github, responsive image gallery css