Create Responsive Slanted Grid Gallery With CSS Clip-path

The Slanted Grid Gallery uses CSS clip-path to create a unique layout for image display.

It transforms traditional square or rectangular grids into a collection of irregular quadrilaterals, forming a cohesive rectangular gallery. The result is a creative mosaic-like effect that sets your image collection apart.

This grid gallery is ideal for showcasing photography portfolios, product displays, or any visual content on your site. The irregular shapes and slanted lines create a sense of movement and depth, drawing the user’s eye across the gallery.

How to use it:

1. Add your images to the Slanted Grid Gallery.

<div class="grid-gallery">
  <div><img src="1.jpg"></div>
  <div><img src="1.jpg"></div>
  <div><img src="1.jpg"></div>
  ...
</div>

2. Add the required CSS/CSS3 styles to your page. The CSS uses several key techniques to achieve the slanted grid effect:

• Grid Layout: The container uses display: grid with three equal columns, creating the basic structure.
• Clip-path: Each image container has a unique clip-path value, which creates the slanted edges. The polygon() function defines the shape of each grid item.
• CSS Variables: The layout uses CSS variables (e.g., --_offset) to calculate positions and sizes, making it easy to adjust the overall design.
• Aspect Ratio: All grid items maintain a 1:1 aspect ratio, ensuring consistent sizing across the gallery.
• Image Fitting: The object-fit: cover property on images ensures they fill their containers without distortion.
• Hover Effects: When a user hovers over the gallery, non-hovered images are grayed out and blurred, drawing attention to the hovered image.
• Positioning: Negative margins on rows after the first create the overlapping effect, giving the gallery its unique appearance.

.grid-gallery{
  --_gap: .5rem;
  --_offset: 10%;
  --_offset-1: calc(var(--_offset) * 1);
  --_offset-2: calc(var(--_offset) * 2);
  --_offset-3: calc(var(--_offset) * 3);
  --_offset-7: calc(var(--_offset) * 7);
  --_offset-8: calc(var(--_offset) * 8);
  --_offset-9: calc(var(--_offset) * 9);
  width: calc(100% - 4rem);
  max-width: 800px;
  margin: 2rem auto;
  color: white;
  font-family: system-ui;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--_gap);
}
.grid-gallery > div{
  aspect-ratio: 1;
  transition: 500ms ease-in-out;
  clip-path: polygon(var(--_clip-path));
}
.grid-gallery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grid-gallery > div:nth-child(n+4){
 margin-top: calc(var(--_offset-3) * -1 + var(--_gap));
}
.grid-gallery > div:nth-child(1){
  --_clip-path: 0 0, 100% 0, 100% var(--_offset-9), 0 100%;
}
.grid-gallery > div:nth-child(2){
   --_clip-path:0 0, 100% 0, 100% var(--_offset-8), 0 var(--_offset-9);
}
.grid-gallery > div:nth-child(3){
   --_clip-path:0 0, 100% 0, 100% var(--_offset-7), 0 var(--_offset-8);
}
.grid-gallery > div:nth-child(4){
   --_clip-path:0 var(--_offset-3), 100% var(--_offset-2), 100% var(--_offset-8), 0 var(--_offset-7);
}
.grid-gallery > div:nth-child(5){
  --_clip-path:0 var(--_offset-2), 100% var(--_offset-1), 100% var(--_offset-9), 0 var(--_offset-8);
}
.grid-gallery > div:nth-child(6){
   --_clip-path:0 var(--_offset-1), 100% 0%, 100% 100%, 0 var(--_offset-9);
}
.grid-gallery > div:nth-child(7){
   --_clip-path:0 0%, 100% var(--_offset-1), 100% 100%, 0 100%;
}
.grid-gallery > div:nth-child(8){
   --_clip-path:0 var(--_offset-1), 100% var(--_offset-2), 100% 100%, 0 100%;
}
.grid-gallery > div:nth-child(9){
   --_clip-path:0 var(--_offset-2), 100% var(--_offset-3), 100% 100%, 0 100%;
}
.grid-gallery:has(:hover) > div:not(:hover){
  filter: grayscale(1) blur(3px);
  opacity: .5;
}