Custom code help: How to turn entire grid cell into a link

Site URL: https://steven.squarespace.com/test

I've created a very simple custom grid using display: grid

Here's the code:

<div class="grid">
  <div class="grid-cell">Some Text</div>
  <div class="grid-cell">Some Text</div>
  <div class="grid-cell">Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</div>
</div>

<style>
  .grid {
    width: auto;
    margin: 0 auto;
    display: grid;
    grid-gap: 1px;
    background-color: #000 !important;
    border: 1px solid #000 !important;
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-cell {
    background-color: #fff;
    color: #000;
    padding: .5rem;
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    word-break: break-word;
  }
</style>

How do I turn each entire grid cell into a link?

I tried wrapping <div class="grid-cell">Some Text</div> in anchor tags, but for some reason, it breaks the grid design.

Any non-JS solutions?

Thank you in advance.

22 hours ago, sqsp said:

Site URL: https://steven.squarespace.com/test

I've created a very simple custom grid using display: grid

 

Here's the code:

 

<div class="grid">
  <div class="grid-cell">Some Text</div>
  <div class="grid-cell">Some Text</div>
  <div class="grid-cell">Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</div>
</div>

<style>
  .grid {
    width: auto;
    margin: 0 auto;
    display: grid;
    grid-gap: 1px;
    background-color: #000 !important;
    border: 1px solid #000 !important;
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-cell {
    background-color: #fff;
    color: #000;
    padding: .5rem;
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    word-break: break-word;
  }
</style>

 

 

How do I turn each entire grid cell into a link?

I tried wrapping <div class="grid-cell">Some Text</div> in anchor tags, but for some reason, it breaks the grid design.

Any non-JS solutions?

Thank you in advance.

Do you mean adding a link to grid cell?

49 minutes ago, bangank36 said:

Do you mean adding a link to grid cell?

What I would like is make the entire grid cell clickable, not just "Some Text."

1 hour ago, jpeter said:

@sqsp you'll need to wrap the content within the <div class="grid-cell"> in an <a> tag and add some additional styles. See the following Codepen for a working example of the code you provided. https://codepen.io/jeremypeter/pen/yLzKaaM

Thank you!!

5 hours ago, sqsp said:

 

 

What I would like is make the entire grid cell clickable, not just "Some Text."

I think we can implement some Css code to make the a tag cover all cell.

Kindly wrap the content in cell with the a tag and try the following style

.grid-cell a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

with the style, I think we should combine with block id so your css would not affect the other element on your site

Hope it makes sense

54 minutes ago, bangank36 said:

I think we can implement some Css code to make the a tag cover all cell.

Kindly wrap the content in cell with the a tag and try the following style

.grid-cell a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

with the style, I think we should combine with block id so your css would not affect the other element on your site

Hope it makes sense

Thank you!!