Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to create this image gallery grid using clip-path in css?

I am trying to create a layout where I have a big image on the left side and four smaller images arranged in a grid on the right side. The overall container should have skewed edges, as shown in the image below:enter image description here

I tried using clip path but i am not able to get the top and bottom spacing. and i also followed this article https://css-tricks.com/css-grid-and-custom-shapes-part-3/.

Tags:

2

Answers


  1. 0

    Do you mean something like this?

    #container {
  --g: 6px;
  display: grid;
  width: 450px;
  aspect-ratio: 1;
  grid: auto-flow 1fr/repeat(1fr);
  gap: var(--g);
  border: 2px solid red;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

#container div {
  width: 100%;
  height: 100%;
  background-color: #000;
  object-fit: cover;
}

#container div:nth-child(1) {
  grid-area: 5/1/span 5/span 5;
  clip-path: polygon(60% 14%, 100% 4%, 100% 80%, 0 100%, 0 14%);
}

#container div:nth-child(2) {
  grid-area: 4/6/span 3/span 2;
  clip-path: polygon(100% 30%, 100% 100%, 0 100%, 0 40%);
}

#container div:nth-child(3) {
  grid-area: 4/8/span 3/span 2;
  clip-path: polygon(100% 20%, 100% 100%, 0 100%, 0 30%);
}

#container div:nth-child(4) {
  grid-area: 6/6/span 3/span 2;
  clip-path: polygon(100% 35%, 100% 100%, 0 100%, 0 35%);
}

#container div:nth-child(5) {
  grid-area: 6/8/span 3/span 2;
  clip-path: polygon(100% 35%, 100% 100%, 0 100%, 0 35%);
}
    <div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

    My guess is that you were attempting to to use the clip-path feature while inserting incorrect coordinates for polygons. This would cause clip-path to not work properly. There are many tools to help fix this mistake, but one that i found with a quick search was this. I hope this helps!

    Login or Signup to reply.
  2. 0

    To get a responsive layout you need to work in relative (e.g. %) terms.

    The measurements used in this snippet were obtained simply using a ruler so you may want to alter them to get perfect accuracy for your required layout.

    The basic layout is a 2×2 grid with the first column being twice the width of the second column and the first element spanning two rows.

    The clipping is done on the whole layout element.

    <style>
  .container {
    width: 100vw;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .layout {
    width: 80vw;
    --ar: calc(26.5 / 15);
    aspect-ratio: var(--ar);
    /* roughly - obtained using a ruler on the given image */
    display: grid;
    row-gap: calc(var(--ar) * 1%);
    column-gap: 1%;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    clip-path: polygon(0 calc(2.5 / 15 * 100%), calc(9 / 26.5 * 100%) calc(2.5 / 15 * 100%), 100% 0, 100% calc(12.5 / 15 * 100%), 50% calc(12.5 / 15 * 100%), 0 100%);
  }
  
  .layout>* {
    background: black;
  }
  
  .layout :nth-child(1) {
    grid-row: span 2;
  }
</style>
<div class="container">
  <div class="layout">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search