How do I add href to individual images on image-grid?-CodePudding

I am new to coding, so thank you for any assistance. I have a responsive image grid with columns. Ive set it up to transform to 2 columns on media screens smaller than 768.. Ive successfully added href links to the smaller images. When I add href links to the remaining two images the image size destroys the grid.

Is there a way to add href link to the remaining images on this code without destroying the grid?

body {
  margin: 0;
}

.image-grid {
  --gap: 10px;
  --num-cols: 4;
  --row-height: 200px;
  box-sizing: border-box;
  padding: var(--gap);
  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: var(--row-height);
  gap: var(--gap);
}

.image-grid>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-grid-col-2 {
  grid-column: span 2;
}

.image-grid-row-2 {
  grid-row: span 2;
}

.image-grid-col-3 {
  grid-column: span 2;
}

.image-grid-row-3 {
  grid-row: span 1;
}

.straighthair-container {
  grid-row: span 1;
  grid-column: span 2;
}

.image-grid .image-grid-col-2 .image-grid-row-2 {
  --gap: 10px;
  --num-cols: 4;
  --row-height: 200px;
  box-sizing: border-box;
  padding: var(--gap);
  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: var(--row-height);
  gap: var(--gap);
}


/* Small devices (phones, 768px and down) */

@media only screen and (max-width: 768px) {
  .image-grid {
    --num-cols: 2;
    --row-height: 200px;
  }
  .image-grid-col-3 {
    grid-row: span 1;
    grid-column: span 1;
  }
  .image-grid-row-3 {
    grid-row: span 1;
    grid-column: span 1;
  }
  .image-grid-col-2 {
    grid-row: span 1;
    grid-column: span 1;
  }
  .image-grid-row-2 {
    grid-row: span 1;
    grid-column: span 1;
  }
}

<div >
  <img  src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/raw-indian-bundles3.jpg?v=1645152903" alt="architecture">

  <img  src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/straight_wigs_menu_item.jpg?v=1646624010" alt="">

  <a href="https://donnaparks.com/products/raw-indian-5x5-hd-lace-custom-wig-12-inches?variant=41566470701217" target="_self">
    <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/blondebodywave-bundles.jpg?v=1645155520" alt="" style="width:100%;height:100%;object-fit:cover;">
  </a>

  <a href="https://donnaparks.com/products/raw-indian-5x5-hd-lace-custom-wig-12-inches?variant=41566470701217" target="_self">
    <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/blondebodywave-bundles.jpg?v=1645155520" alt="" style="width:100%;height:100%;object-fit:cover;">
  </a>
</div>

CodePudding user response：

One of the problems is that on adding an a tag around the first two images, the classes that position things are incorrect. The grid is positioning anchor tags, not imgs now.

I found it a little hard to follow the different classes and in this snippet have used instead the CSS nth-child selector.

The grid is defined as 4 columns wide and 2 rows deep for the wider viewports and 2 columns wide 4 rows deep for the narower viewports.

A couple of other observations:

Using cover means that part of the images get cut off in some aspect ratios. This matters in your case as there is text. This snippet uses contain instead to ensure the characters don't get cut off.

I assume (but don't know so of course you may want to take this out) that you want all 4 images to show in the viewport whatever the aspect ratio. This snippet choses the size of the grid items to make them square but to make sure nothing runs off the bottom of the viewport by using the CSS min function.

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

.image-grid {
  display: inline-grid;
  grid-template-columns: repeat(4, min(25vw, 50vh));
  grid-template-rows: repeat(2, min(25vw, 50vh));
  background-color: pink;
  gap: 0;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-grid * {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
}

.image-grid>*:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.image-grid>*:nth-child(2) {
  grid-column: 3 / span 2;
  grid-row: 1 / span 1;
}

.image-grid>*:nth-child(3) {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}

.image-grid>*:nth-child(4) {
  grid-column: 4 / span 1;
  grid-row: 2 / span 1;
}

@media screen and (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, min(50vw, 25vh));
    grid-template-rows: repeat(4, min(50vw, 25vh));
  }
  .image-grid>*:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }
  .image-grid>*:nth-child(2) {
    grid-column: 1 / span 2;
    grid-row: 3 / span 1;
  }
  .image-grid>*:nth-child(3) {
    grid-column: 2 / span 1;
    grid-row: 4 / span 1;
  }
  .image-grid>*:nth-child(4) {
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
  }
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div >
    <a> <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/raw-indian-bundles3.jpg?v=1645152903" alt="architecture">
    </a>
    <a>
      <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/straight_wigs_menu_item.jpg?v=1646624010" alt="">
    </a>
    <a href="https://donnaparks.com/products/raw-indian-5x5-hd-lace-custom-wig-12-inches?variant=41566470701217" target="_self">
      <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/blondebodywave-bundles.jpg?v=1645155520" alt="">
    </a>

    <a href="https://donnaparks.com/products/raw-indian-5x5-hd-lace-custom-wig-12-inches?variant=41566470701217" target="_self">
      <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/blondebodywave-bundles.jpg?v=1645155520" alt="">
    </a>
  </div>
</body>