In grid, what does 2/-2 means?-CodePudding

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?

CodePudding user response：

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;
}

<div >
  <div id="nr1" >1</div>
  <div id="nr2" >2</div>
  <div id="nr3" >3</div>
  <div id="nr4" >4</div>
</div>

CodePudding user response：

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;
}

<div >
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <div style="grid-column:1/-1">
    from the 1st to the last
  </div>
  <div style="grid-column:2/-2">
    from the 2nd to the "before the last" 
  </div>
  <div style="grid-column:3/-3">
    from the 3rd to the 3rd starting from the end 
  </div>
</div>