skip to Main Content

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


  1. 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. 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. `.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