Make item on CSS grid a hyperlink

问题

I am working with the CSS grid. I thought that I could make one single grid item to a hyperlink, if I wrapped it in an a tag. But I can see that this solution is not working.

The whole grid consist of around 30 grid elements made with the CSS grid. Building the grid up with flex boxes is therefore not a good solution.

Does anybody have an idea on how I can turn the whole grid column into a hyperlink?

.item2 {
  grid-row: 1 / 1;
  grid-column: 7/13;
  height: 340px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  background-image: url("https://vouzalis.dk/Static/Cms/3cb56b7b-b099-487e-a160-f288ade024f7.jpg");
}

<a href="https://www.google.com">
  <div class="item2 bg-img">
    <a href="sbp-tag">FEATURED</a>
    <a class="sbp-title light-font" href="https://www.google.com">Go to Google</a>
  </div>
</a>

回答1:

You want to use grid but you use flex so change the dispaly to grid

OR If you want to use flex use without the grid-column/row
Use wrap div and set href on click to demo link use cursor: pointer;

.wrap{
    cursor: pointer;
}
.item2 {
      grid-row: 1 / 1;
      grid-column: 7/13;
      height: 340px;
      display: grid;
      background-image: url("https://vouzalis.dk/Static/Cms/3cb56b7b-b099-487e-a160-f288ade024f7.jpg");
    }

<div class="wrap" onclick='location.href = "https://www.w3schools.com";'>
      <div class="item2 bg-img">
        <a href="sbp-tag">FEATURED</a>
        <a class="sbp-title light-font" href="https://www.google.com">Go to Google</a>
      </div>
</div>

来源：https://stackoverflow.com/questions/54967009/make-item-on-css-grid-a-hyperlink

标签

html

css

css3

flexbox

css-grid