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>>Solution :
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>