Making grid item into link-CodePudding

I'm creating my first website and I tried to use display: grid which I've recently studied. Everything went smoothly but there's one thing that I'm stuck on:

So my aim is to make the entire box, into a link, such as:

.grid-container {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 22%);
  grid-template-rows: 37.39px repeat(6, 90px);
  grid-gap: 30px;
  justify-content: center;
}

.grid-category {
  background-image: url('../imgs/backgroundgood.png');
  background-repeat: round;
  text-align: center;
  line-height: 220%;
}

.grid-item {
  position: absolute;
  background-color: #3b3d49;
  border-radius: 15px;
  width: 50%;
  position: relative;
  justify-self: center;
  transition: all 0.2s ease;
}

.grid-container .grid-item .text {
  position: relative;
  margin-top: 60px;
  text-align: center;
}

.grid-container .useless {
  visibility: hidden;
}

<div >
  <div >Equipment</div>
  <div >Weapons</div>
  <div >Ammunition</div>
  <div >Miscellaneous</div>
  <div >
    <div >Helmet</div>
  </div>
  <div >
    <div >Rod</div>
  </div>
  <div >
    <div >Arrow</div>
  </div>
  <div >
    <div >Necklace</div>
  </div>
  <div >
    <div >Armor</div>
  </div>
  <div >
    <div >Wand</div>
  </div>
  <div >
    <div >Bolt</div>
  </div>
  <div >
    <div >Ring</div>
  </div>
  <div >
    <div >Legs</div>
  </div>
  <div >
    <div >Axe</div>
  </div>
  <div >
    <div >Distance</div>
  </div>
  <div >
    <div >Backpack</div>
  </div>
  <div >
    <div >Boots</div>
  </div>
  <div >
    <div >Club</div>
  </div>
  <div ></div>
  <div ></div>
  <div >
    <div >Spellbook</div>
  </div>
  <div >
    <div >Sword</div>
  </div>
  <div ></div>
  <div ></div>
  <div >
    <div >Shield</div>
  </div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Just replace <div > by <a href="linkOr#id" >.

You can remove the link style with :

a {
  color: inherit;
  text-decoration: inherit;
}

Also, instead of using 2 classes like grid-item grid-item1, you could only use grid-itemX and select element starting with grid-idem with [class^="grid-item"].

If you only have one grid-item1 you could use an id instead and select it by the same way : [id^="grid-item"]

[id^="grid-item"]{
  width:50px;
  height:50px;
  margin-bottom:20px;
  border:1px solid black;
}
#grid-item2{
  background-color:orange;
}

<div id="grid-item1"></div>
<div id="grid-item2"></div>
<div id="grid-item3"></div>

CodePudding user response：

Try this:

.grid-container {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 22%);
  grid-template-rows: 37.39px repeat(6, 90px);
  grid-gap: 30px;
  justify-content: center;
}

.grid-category {
  background-image: url('../imgs/backgroundgood.png');
  background-repeat: round;
  text-align: center;
  line-height: 220%;
}

.grid-item {
  position: absolute;
  background-color: #3b3d49;
  border-radius: 15px;
  width: 50%;
  position: relative;
  justify-self: center;
  transition: all 0.2s ease;
}

.grid-item a {
  display: -webkit-box;
  height: -webkit-fill-available;
  color: black;
  text-decoration-line: none;
}

.grid-container .grid-item .text {
  position: relative;
  margin-top: 60px;
  text-align: center;
  width: 100%;
}

.grid-container .useless {
  visibility: hidden;
}

<div >
  <div >Equipment</div>
  <div >Weapons</div>
  <div >Ammunition</div>
  <div >Miscellaneous</div>
  <div >
    <a href="#"><div >Helmet</div></a>
  </div>
  <div >
    <a href="#"><div >Rod</div></a>
  </div>
  <div >
    <a href="#"><div >Arrow</div></a>
  </div>
  <div >
    <a href="#"><div >Necklace</div></a>
  </div>
  <div >
    <a href="#"><div >Armor</div></a>
  </div>
  <div >
    <a href="#"><div >Wand</div></a>
  </div>
  <div >
    <a href="#"><div >Bolt</div></a>
  </div>
  <div >
    <a href="#"><div >Ring</div></a>
  </div>
  <div >
    <a href="#"><div >Legs</div></a>
  </div>
  <div >
    <a href="#"><div >Axe</div></a>
  </div>
  <div >
    <a href="#"><div >Distance</div></a>
  </div>
  <div >
    <a href="#"><div >Backpack</div></a>
  </div>
  <div >
    <a href="#"><div >Boots</div></a>
  </div>
  <div >
    <a href="#"><div >Club</div></a>
  </div>
  <div ></div>
  <div ></div>
  <div >
    <a href="#"><div >Spellbook</div></a>
  </div>
  <div >
    <a href="#"><div >Sword</div></a>
  </div>
  <div ></div>
  <div ></div>
  <div >
    <a href="#"><div >Shield</div></a>
  </div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>