Yogesh Chauhan's Blog

Create a galley with overlapping images using CSS grid

in CSS on July 27, 2021

Step 1: HTML

Let’s fetch images with picsum API and add HTML with stacked on each other by default.

Step 2: Create the grid

I am using this specific code for creating rows and columns. Play with those numbers if you like.


.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 1fr 4rem 1fr 5rem 1fr 10rem;
  margin: 0 auto;
  max-width: 800px;
}

Step 3: Place the images in the grid

Let’s adjust the images position finally and place them in the grid with overlapping on each other.

Apart from adding the grid code from above, I have set box-sizing as border-box. Adding a box-show property will add a nice tough to images. Also, images have aspect-ratio set instead of a fixed height.

This is very basic example to display the gallery with overlapping images. Experiment with it and make as complex as possible.


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Components and Props in ReactReactHow to make a web page look good on any device?HTMLEssential SQL Commands We Need to KnowSQL/MySQLHow to Install PHP Laravel on MacOS Catalina?PHPImplicit and Explicit Joins in Oracle SQLSQL/MySQLHow to create an empty array in Swift?SwiftWhat happened to your Google Analytics Tracking ID, can’t find it?MiscellaneousURL paths in DrupalDrupalHTML Copyright SymbolHTMLHow to add Date and Time picker in HTML and get the values using JavaScript?HTMLHere’s what we can do with PHP date() functionPHPHow get_template_part helps write reusable code in WordPress?WordPress