Simple Fast Photo Gallery Using CSS Grid

Category: CSS & CSS3 , Gallery , Recommended | August 26, 2021
Author:Gnkalk
Views Total:276 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>

You Might Be Interested In:


Leave a Reply