Question 311881 in Html Question posted in
Some basic documentation can be found here.

Html – How to make links not take up space in the grid?

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

3

Answers


  1. 0

    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 use place-self: start:

    .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;
  place-self: start;
}
    <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>
    Login or Signup to reply.
  2. 0

    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.

    .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">
    <span><a href="/a">Link1</a></span>
    <span>
      <a href="/a">Link2</a>
    </span>
    <span>
      <a href="/a">Link3</a>
    </span>
    <span>
      <a href="/a">Link4</a>
    </span>
  </div>
</div>
    Login or Signup to reply.
  3. 0 
    `.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;
  position: relative; /* Set position to relative */
}

a {
  border: 1px dashed red;
  position: absolute; /* Set position to absolute */
  top: 0;
  left: 0;
}`
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search