title: Make item on CSS grid a hyperlink
body: <p>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 <code>a</code> tag. But I can see that this solution is not working. </p>
  
  <p>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.</p>
  
  <p>Does anybody have an idea on how I can turn the whole grid column into a hyperlink?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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");
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="https://www.google.com"&gt;
    &lt;div class="item2 bg-img"&gt;
      &lt;a href="sbp-tag"&gt;FEATURED&lt;/a&gt;
      &lt;a class="sbp-title light-font" href="https://www.google.com"&gt;Go to Google&lt;/a&gt;
    &lt;/div&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>