How to make links not take up space in the grid and not be clickable on empty spaces?
I do not know how to explain correctly. Look at my code. I have circled in red. I need to get rid of this but it should be a grid.
.theContainer {
border: 1px solid blue;
padding: 20px;
width: 300px;
height: 300px
}
.theGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 30px;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
}
a {
border: 1px dashed red;
}
<div class="theContainer">
<div class="theGrid">
<a href="/a">Link1</a>
<a href="/a">Link2</a>
<a href="/a">Link3</a>
<a href="/a">Link4</a>
</div>
</div>
3
Answers
Apply
place-self
/justify-self
/align-self
CSS properties to override the sizing of the<a>
elements. For example, to have them in the top-left corner of each grid space, we could useplace-self: start
:You can put the
<a/>
elements inside<span/>
elements and then<a/>
will only take as much space as needed by them.Here is the updated code.