The CSS Grid Layout is a powerful tool for creating responsive and visually appealing web layouts. Whether you are a web developer working on a new project or a hobbyist looking to enhance your portfolio, learning how to create an image gallery using CSS Grid will elevate your design skills.
Index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="container"> <div class="item"> <img src="https://picsum.photos/400/400?random=1" alt=""> </div> <div class="item "> <img src="https://picsum.photos/400/400?random=2" alt=""> </div> <div class="item "> <img src="https://picsum.photos/400/400?random=3" alt=""> </div> <div class="item"> <img src="https://picsum.photos/400/400?random=4" alt=""> </div> <div class="item "> <img src="https://picsum.photos/400/400?random=5" alt=""> </div> <div class="item"> <img src="https://picsum.photos/400/400?random=6" alt=""> </div> <div class="item"> <img src="https://picsum.photos/400/400?random=7" alt=""> </div> </div> </body> </html>
Index.css
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } img { width: 100%; height: 400px; object-fit: cover; } .item2, .item3 { grid-column: span 2; }
Introduction to Flexbox When it comes to building responsive layouts, Flexbox offers a powerful and…
In this tutorils we are going to teach how to make a attractive Login &…
In this tutorial we are going to teach Form Repeater using HTML CSS JQuery.step by…
Introduction to AJAX and Laravel 11 AJAX, which stands for Asynchronous JavaScript and XML which…
Introduction to FD Rate Calculation In any banking project, accurately calculating Fixed Deposit (FD) rates…
In this tutorials will teach how to make a calculator using wpf C# application step…