search

rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
323 stars 12 forks source link

`grid-row: 1 / -1` doesn't behave like `grid-column: 1 / -1` 🤔 #155

Closed wesruv closed 1 year ago

wesruv commented 5 years ago

My use case is I'm building a component for a CMS, I like how grid adds a new row per smaller component in the text area and I needed to make the image in right column full height in the text area.

I tried use grid-row: 1 / -1 expecting it to make the image span all of the rows that render (since some fields could be left out, so the number of rows could be variable), but it doesn't seem to do anything, and it Chrome isn't marking it as invalid?

I can find a way around it, but it seems like it should behave like grid-column: 1 / -1

https://codepen.io/wesruv/pen/NoEMRL

Not entirely sure where the best place to post this is, after googling I thought I'd try here. Thank you!

wesruv commented 1 year ago

This came up in discussion, I found if I add this to the grid-container:

grid-template-rows: repeat(5, 1fr);

To the grid-container, then grid-row: 1 / -1; works. A bummer, but not the end of the world. The spec says "the explicit grid" for the value of grid-row/column, which I'm guessing is the issue here.