Simple Fast Photo Gallery Using CSS Grid

Preview:

Description:

A minimal responsive photo gallery built only using CSS grid layout.

How to use it:

1. Load the gallery stylesheet in the document.

<!-- 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 photo 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>