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

Does HTML-CSS grid create empty rows and columns?

I have a grid with 2 areas. It works fine with grid-template-areas: "list details". Why does it create a 3×2 grid if I specify only one area: grid-template-areas: "list"? And why does it stick the second area in the bottom right track?

https://jsfiddle.net/o5txebkc/

#main {
    display: grid;
    grid-template-areas:
        "list";
}

    #main .list {
        background: yellow;
        grid-area: list;
    }

    #main .details {
        background: green;
        grid-area: details;
    }
<main id="main">
  <article class="list">
    <ul>
      <li>one</li>
      <li>two</li>
    </ul>
  </article>

  <article class="details">
    <h3>Details</h3>
    <p>
      some details
    </p>
  </article>
</main>
Tags:

2

Answers


  1. 0

    Try this

    #main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

#main .list {
    background: yellow;
}

#main .details {
    background: green;
}
    <main id="main">
  <article class="list">
    <ul>
      <li>one</li>
      <li>two</li>
    </ul>
  </article>

  <article class="details">
    <h3>Details</h3>
    <p>
      some details
    </p>
  </article>
</main>
    Login or Signup to reply.
  2. 0

    Using Developer Tools to highlight the grid and show the lines, I see that "details" is positioned outside of the grid. Notice that the behavior changes if you remove grid-area: details;.

    Because you defined a grid-area for "details" but did not give it a position on the grid, it is placed outside of the grid where it is not touching the named lines.

    If a name is given as a <custom-ident>, only lines with that name are
    counted. If not enough lines with that name exist, all implicit grid
    lines are assumed to have that name for the purpose of finding this
    position.

    https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area#values

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search