How does grid-row: 1 / -1 actually work? (references needed)

Question

generally i used to bootstrap for frontend design.. i am using css grid layout since about half year. i did not face any problem like before or i did not think this way

i read some article to find out how exactly grid-row: 1 / -1 work or it's behaviour .. maybe be i skip it... maybe it's a bad question or already answer here

.grid-container > div.item span { grid-row: 1 / -1 ; not working } not working...

note:

grid-row: 1 / span number.. will not solve the problem. (undefined number of paragraph tag).
if i write grid-row: 1 / 99999 .. a higher number . it will solve my problem.. maybe it's baad practice...
grid-row: 1 / -1. not working...

need clear explanation of it's behaviour or reliable source doc

.grid-container {
  display: grid;
  grid-template-columns: repeat(2,1fr)  ;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  animation: mymove 5s infinite;
}

.grid-container > div.item {
   display: grid;
  grid-template-columns: max-content 1fr ;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.grid-container > div.item span {
      /* grid-row: 1 / -1 ; not working */
     grid-row: 1 / 99999;
}

<div class="grid-container">
  <div class="item">
      <span style="writing-mode: vertical-rl;">Tex</span>
    <h4 style>Title</h4>
    <p>Pargraph</p>
     <p>Pargraph</p>
  </div>
  <div class="item">
      <span style="writing-mode: vertical-rl;"> Tex</span>
    <h4>Title</h4>
    <p>Pargraph</p>
     <p>Pargraph</p>
     <p>Pargraph</p>
  </div>
</div>

This guide could be useful: https://css-tricks.com/snippets/css/complete-guide-grid/ — AbsoluteBeginner, Sep 08 '20 at 12:50

Temani Afif · Accepted Answer · 2020-09-07T10:05:38.870

4

grid-row:1/-1 means grid-row-start:1 and grid-row-end:-1 and if you check the specification you can read:

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).

The trick is the explicit grid. In your case you didn't define any explicit rows and your elements will be placed automatically generating new rows we call the implicit grid

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid. When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid.

and

...If these properties don’t define any explicit tracks the explicit grid still contains one grid line in each axis.

So grid-row:1/-1 will not consider the grid structure after placing all the elements but will consider the intial definition of the grid before placing any element and this grid contain 2 columns (defined by grid-template-columns: max-content 1fr) and 0 rows.

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

edited Sep 07 '20 at 10:05

answered Sep 07 '20 at 09:59

Temani Afif

245,468
26
309
415

firstly thanks for you answer and source doc . one more question .. if i write grid-row: 1 / 99999 .. a higher number .. what about this ? would you explain plz ? it's good or bad practice ? – نور Sep 08 '20 at 04:35
1

@AbdullahAlNoor I would say it's a viable solution. Good or bad is opinion based. If it's working then it's a good solution for me, I also use this trick a lot of times. The only drawback with this trick is that it won't work with grid-row-gap but you can easily replace it by margin. By the way, no need to go that high, using 300 would be already enough as big number (I doubt you will reach 300 rows) – Temani Afif Sep 08 '20 at 08:45
sorry for disturb you again... you tell you can easily replace it by margin. where i put it margin or how ? basically i want to learn this trick ? plz – نور Sep 08 '20 at 09:39
1

@AbdullahAlNoor check this: https://stackoverflow.com/a/56876772/8620333 I made an example with column but the same apply to rows and you will find there how I will use margin instead of gap – Temani Afif Sep 08 '20 at 09:41
@TemaniAffif maybe one thing is missing from your ans... why positive number work in implicit grid row in this situtaion or not working negative number.. or maybe i missed it... if i miss it plz mention again... sorry for disturb you again.... – نور Sep 08 '20 at 13:51
@AbdullahAlNoor both positive and negative numbers work in explicit grid the only difference is that a positive number will start the count from the left edge (or top edge) of the explicit grid whilte negative number will start the count from the right edge (or bottom edge) of the explicit grid ... In all the cases, the trick is that the reference will be the explcit grid that contain no rows in your case – Temani Afif Sep 08 '20 at 13:54
sorry it will be implict...i miss spelll – نور Sep 08 '20 at 13:55
@AbdullahAlNoor can you show me why you think it works in the implicit? I am not getting you. – Temani Afif Sep 08 '20 at 13:56
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/221163/discussion-between-abdullah-al-noor-and-temani-afif). – نور Sep 08 '20 at 13:57

How does grid-row: 1 / -1 actually work? (references needed)

1 Answers1

Linked