Simple Fast Photo Gallery Using CSS Grid


Author: Gnkalk
Views Total: 629 views
Official Page: Go to website
Last Update: August 26, 2021
License: MIT

Preview:

Simple Fast Photo Gallery Using CSS Grid

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>

See also  Create 3D Flip Effect section

Leave a Reply

Your email address will not be published. Required fields are marked *