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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
What is XP (Extreme Programming) and When should it be used?Miscellaneous4 different Ways to Get JavaScript OutputJavaScriptHow to add a Bar Chart in Angular App?AngularJavaScript arrays: a separate data type or Objects?JavaScriptHow to hide and show menu on scroll using JavaScript and CSS?CSSWindow setTimeout() Method in JavaScriptJavaScriptHow to Use the EXISTS and NOT EXISTS Operator with a Subquery in SQL and MySQL?SQL/MySQLHow to control file extensions with an .htaccess file?MiscellaneousHow to deploy Angular App on Dreamhost or Amazon S3 or firebase?AngularHow to display and animate image on scroll using JavaScript?JavaScriptUnderstanding the confusing and handy “This” keyword in JavaScriptJavaScriptJavaScript Number MethodsJavaScript