CODEWITHSUNDEEP
htmlcsscss-grid
Alexander
Alexander

Reputation: 311

Grid item doesn't leave one grid cell

As you can see, I have divided .content div into five equal columns. I wanted to make navigation (nav) be in the center of the last two of the columns.

I specified that its location should be on 4 / 5 and also added justify-self: center for centering, but apparently, the element is just stuck on the 4th column. I also inspected it and It doesn't leave one column no matter what. How do I fix this?

.content {
  height: 100vh;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
}

.content nav {
  grid-column: 4 / 5;
  grid-row: 1;
  align-self: center;
  justify-self: center;
}

.content nav a {
  margin: 0cm 0.5cm 0cm 0.5cm;
}
<div class="content">
  <nav>
    <a href="#">Text #1</a>
    <a href="#">Text #2s</a>
    <a href="#">Text #3</a>
    <a href="#">Text #4</a>
  </nav>
</div>

Upvotes: 2

Views: 218

Answers (1)

vikdotdev
vikdotdev

Reputation: 105

grid-column: 4 / 5 does not work as you expect because numbers 4 and 5 do not represent grid cells but rather grid lines.

Take a look at this picture:

Take a look a this picture

grid-column: 3 / 5 here means position this area between column lines 3 and 5.

As @VXp said in the comments - set it to grid-column: 4 / 6 or grid-column: 4 / span 2 and that should do it.

Here's a good guide that thoroughly covers css grid.

Upvotes: 3

Related Questions