Using Negative Integers with Implicit Rows in CSS Grid

Using negative integers with implicit rows in CSS Grid

You can only use negative integers in an explicit grid.

See the Grid spec here:

7.1. The Explicit
Grid

Numeric indexes in the grid-placement properties count from the edges
of the explicit grid. Positive indexes count from the start side
(starting from 1 for the start-most explicit line), while negative
indexes count from the end side (starting from -1 for the end-most
explicit line).

and here...

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

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

Making a grid area span an entire column / row, including implicit tracks, when the number of tracks in the grid is unknown, is not possible in CSS Grid Level 1, unless you want to try to hack it.

Understanding grid negative values

when using the same value inside grid-column/grid-row you will fall into this rule:

If the placement for a grid item contains two lines, and the start line is further end-ward than the end line, swap the two lines. If the start line is equal to the end line, remove the end line.^ref

So saying grid-column:-1/-1 means grid-column:-1 which is grid-column:-1/auto

auto

The property contributes nothing to the grid item’s placement, indicating auto-placement or a default span of one. (See § 8 Placing Grid Items, above.)

So basiclly you said to your element to start at the last line and span one column which will create an implicit new column:

A basic example to illustrate:

.box {
  display:grid;
  grid-template-columns:20px 20px 20px;
  grid-auto-columns:100px;
  grid-gap:5px;
}

span {
  grid-column:-1/-1;
  height:40px;
  background:red;
}

<div class="box">
  <span></span>
</div>

Make a grid item span to the last row / column in implicit grid

You can add grid-row-start to that boxes css, and set it to span an absurdly high number.

.container {  display: grid;  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;   grid-template-rows: auto [last-line];}
.box {  background-color: blue;  padding: 20px;  border: 1px solid red;}
.box:nth-child(3) {  background-color: yellow;  grid-column: last-col / span 1;  grid-row: 1 / last-line;  grid-row-start: span 9000;}

<div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box">3</div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div></div>

CSS grid - Overlapping grid line numbers

Your rows are sizeless, therefore row 6 overlaps rows 2,3,4,5.

#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, 100px);
}

#red {
  grid-area: 6;
  background-color: red;
}

#green {
  background-color: lightgreen;
}

#blue {
  background-color: blue;
}

div {
  height: 100px;
  width: 100px;
}

<div id='grid'>
  <div id='red'></div>
  <div id='green'></div>
  <div id='blue'></div>
 </div>

How to span to the last column in an implicit grid?

Why shouldn't it work on implicit grids?

Because we can easily run on undefined cases¹ or a cyclic dependency. If it was the implicit grid, it means that we need to first place all the others element to identify the implicit grid then we place our element BUT if we place our element we will obtain another implicit grid so technically you cannot know the implicit grid without placing the element.

The idea behind the implicit grid is to place the element that doesn't have anything defined for their placement automatically after placing the ones with known places.

---

You can overcome this by using some hacks either for row or column:

Stretch an element to the end of the automatically calculated grid, not just the explicit grid

Forcing a column to be empty in a responsive grid layout

---

¹ A basic example:

.grid {  display: grid;  grid-template-columns: 50px;  grid-gap: 5px;  grid-auto-flow: column;  grid-auto-columns:50px;}
.grid>span {  height: 50px;  background: red;}
.grid>span.place {  grid-column: 1 / -1;  background: blue;}

<div class="grid">  <span></span>  <span class="place"></span></div>

Can a grid cell span every column without specifying the number of columns?

Unfortunately, no. This is not possible with the current version of CSS Grid (Level 1).

For a grid area to expand across all columns or rows, using the negative integer method (1 / -1), you'll need an explicit grid container.

From the specification:

7.1. The Explicit Grid

Numeric indexes in the grid-placement properties count from the edges
of the explicit grid.

Positive indexes count from the start side (starting from 1 for the start-most explicit line), while negative indexes count from the end side (starting from -1 for the end-most explicit line).

and here...

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

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

Make a grid column span the entire row

Here are two interesting sections in the CSS Grid specification:

7.1. The Explicit Grid

Numeric indexes in the grid-placement properties count from the edges
of the explicit grid. Positive indexes count from the start side,
while negative indexes count from the end side.

also here...

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

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

In other words, when dealing with an explicit grid, which means a grid defined by these properties:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid (which is the shorthand for the three properties above, among others)

... you can make a grid area span all columns by setting this rule:

grid-column: 1 / -1;

That tells the grid area to span from the first column line to the last column line, which I believe meets your stated objective:

"We would need to apply something like grid-column: span ALL (if something like that exists), with meaning that ALL = till the end of current row."

jsFiddle demo

.grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));  background-color: silver;}
.grid-second {  grid-column: 2 / -1;  background-color: red;}

/* Not important fancy styles */
.grid div {  height: 40px;  text-align: center;  padding-top: 20px;}
.grid-another {  background-color: purple;  border: 1px solid gray;}

<div class="grid">  <div class="grid-first">First</div>  <div class="grid-second">Second (Want till end)</div></div><!-- Another same grid --><div class="grid">  <div class="grid-another">1</div>  <div class="grid-another">2</div>  <div class="grid-another">3</div>  <div class="grid-another">4</div>  <div class="grid-another">1</div>  <div class="grid-another">2</div>  <div class="grid-another">3</div>  <div class="grid-another">4</div>  <div class="grid-another">1</div>  <div class="grid-another">2</div>  <div class="grid-another">3</div>  <div class="grid-another">4</div></div>

---

Related Topics