7

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:

  1. grid-row: 1 / span number.. will not solve the problem. (undefined number of paragraph tag).
  2. if i write grid-row: 1 / 99999 .. a higher number . it will solve my problem.. maybe it's baad practice...
  3. 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>

Improve this question
1

1 Answer 1

Reset to default
9

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?

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

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 ?
@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)
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
@AbdullahAlNoor check this: 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
@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....
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.