In grid, what does 2/-2 means?

Question

I have seen someone used grid-column: 1/-1 and he explained that instead to write 1/(the number of the last grid), you simply can use 1/-1 . But then i have seen he also used 2/-2, i thought it means start from grid 2 till the end, but it didnt it has spanned like 2/4. so what does 2/-2 means?

user_8620333 · Answer

A self-explanatory example:

.grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-gap:10px;
}

i {
  background:red;
  height:20px;
}

.grid > div {
  border:2px solid;
  height:50px;
  text-align:center;
}


  
  
    from the 1st to the last
  
  
    from the 2nd to the "before the last" 
  
  
    from the 3rd to the 3rd starting from the end

user_443523 · Answer

As stated in the MDN documentation:

If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

So as you can see in the below example the grid-column: 2 / -2; will spread the element over all columns except the first and last.

.grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  background-color: red;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
}

#nr1 {
  grid-column: 2 / -2;
}

In grid, what does 2/-2 means?

2 Answers