Making grid item into link

Rondel 0
Viewed 25

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 class="grid-container">
  <div class="grid-category">Equipment</div>
  <div class="grid-category">Weapons</div>
  <div class="grid-category">Ammunition</div>
  <div class="grid-category">Miscellaneous</div>
  <div class="grid-item grid-item1">
    <div class="text">Helmet</div>
  </div>
  <div class="grid-item grid-item2">
    <div class="text">Rod</div>
  </div>
  <div class="grid-item grid-item3">
    <div class="text">Arrow</div>
  </div>
  <div class="grid-item grid-item4">
    <div class="text">Necklace</div>
  </div>
  <div class="grid-item grid-item5">
    <div class="text">Armor</div>
  </div>
  <div class="grid-item grid-item6">
    <div class="text">Wand</div>
  </div>
  <div class="grid-item grid-item7">
    <div class="text">Bolt</div>
  </div>
  <div class="grid-item grid-item8">
    <div class="text">Ring</div>
  </div>
  <div class="grid-item grid-item9">
    <div class="text">Legs</div>
  </div>
  <div class="grid-item grid-item10">
    <div class="text">Axe</div>
  </div>
  <div class="grid-item grid-item11">
    <div class="text">Distance</div>
  </div>
  <div class="grid-item grid-item12">
    <div class="text">Backpack</div>
  </div>
  <div class="grid-item grid-item13">
    <div class="text">Boots</div>
  </div>
  <div class="grid-item grid-item14">
    <div class="text">Club</div>
  </div>
  <div class="grid-item useless"></div>
  <div class="grid-item useless"></div>
  <div class="grid-item grid-item15">
    <div class="text">Spellbook</div>
  </div>
  <div class="grid-item grid-item16">
    <div class="text">Sword</div>
  </div>
  <div class="grid-item useless"></div>
  <div class="grid-item useless"></div>
  <div class="grid-item grid-item17">
    <div class="text">Shield</div>
  </div>
  <div class="grid-item useless"></div>
  <div class="grid-item useless"></div>
  <div class="grid-item useless"></div>
</div>

javascript css html
2 Answers

Just replace <div class="grid-item grid-item1"> by <a href="linkOr#id" class="grid-item grid-item1">.

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>

Cédric0

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 class="grid-container">
  <div class="grid-category">Equipment</div>
  <div class="grid-category">Weapons</div>
  <div class="grid-category">Ammunition</div>
  <div class="grid-category">Miscellaneous</div>
  <div class="grid-item grid-item1">
    <a href="#"><div class="text">Helmet</div></a>
  </div>
  <div class="grid-item grid-item2">
    <a href="#"><div class="text">Rod</div></a>
  </div>
  <div class="grid-item grid-item3">
    <a href="#"><div class="text">Arrow</div></a>
  </div>
  <div class="grid-item grid-item4">
    <a href="#"><div class="text">Necklace</div></a>
  </div>
  <div class="grid-item grid-item5">
    <a href="#"><div class="text">Armor</div></a>
  </div>
  <div class="grid-item grid-item6">
    <a href="#"><div class="text">Wand</div></a>
  </div>
  <div class="grid-item grid-item7">
    <a href="#"><div class="text">Bolt</div></a>
  </div>
  <div class="grid-item grid-item8">
    <a href="#"><div class="text">Ring</div></a>
  </div>
  <div class="grid-item grid-item9">
    <a href="#"><div class="text">Legs</div></a>
  </div>
  <div class="grid-item grid-item10">
    <a href="#"><div class="text">Axe</div></a>
  </div>
  <div class="grid-item grid-item11">
    <a href="#"><div class="text">Distance</div></a>
  </div>
  <div class="grid-item grid-item12">
    <a href="#"><div class="text">Backpack</div></a>
  </div>
  <div class="grid-item grid-item13">
    <a href="#"><div class="text">Boots</div></a>
  </div>
  <div class="grid-item grid-item14">
    <a href="#"><div class="text">Club</div></a>
  </div>
  <div class="grid-item useless"></div>
  <div class="grid-item useless"></div>
  <div class="grid-item grid-item15">
    <a href="#"><div class="text">Spellbook</div></a>
  </div>
  <div class="grid-item grid-item16">
    <a href="#"><div class="text">Sword</div></a>
  </div>
  <div class="grid-item useless"></div>
  <div class="grid-item useless"></div>
  <div class="grid-item grid-item17">
    <a href="#"><div class="text">Shield</div></a>
  </div>
  <div class="grid-item useless"></div>
  <div class="grid-item useless"></div>
  <div class="grid-item useless"></div>
</div>

Rizeen0
Related