Grid area and negative numbers
24 Replies
halp me pls 😢
its simple
grid-area is used on grid item
if u use grid-auto-colums: 1fr 1fr;
u create 2 column grid
now lets say u have 4 grid items
layout will be 2*2 matrix
now when u say…grid-area: 1/1/-1/-1
-1 on row column makes sense and it spans to full width
but -1 on row end doesnt make any sense
thay y the browser just ignores that
Shouldn’t the grid now there are 3 rows since it looks like OP had to declare that last item to be on row 3? Otherwise it would’ve popped up next to the blue element. I guess it depends if the grey boxes are elements in the markup or if they are empty grid cells
order just depends on how you structure your grid
depending on your structure, overflowing grid items just wrap to next row/column
That’s what I’m saying , that it looks like OP would have to explicitly set purple on row 3 and leave the empty grey cells in between. If it wasn’t explicitly defined, purple would default to the next empty cell, which is next to blue. They would’ve had to set it with one of the properties to
grid-column: 2; grid-row:3;
Like
grid-template-areas:
‘. Red’
‘Blue .’
‘. Purp’ probably
But if 1 / -1 isn’t working iDrop is probably correct OP that your template hasn’t been explicit defined
https://codepen.io/fluffybacon-steam/pen/PoVVWMO
I modified my original layout so its a 2x2 grid. Grid-area: 1/1/-1/-1 still acting like 1/1/1/1;
If I hover the #greenline in the dev tools, it looks like its span the entire grid yet it is confined to the first quad
Do you have a height set on your green line?
Just noting: The desired outcome is to have the greenline floating in the center (horizontal & vertical) of the grid, overlapping the other grid items.
height is set to 250px
Then it’s possible it does span the whole grid you just can’t see it because you have a fixed height
This layout is behaving differently then my declare grid-template-columns. I am unsure how grid-auto-columns differs
Changing the height only increase the height of the first row
Its still living in the first quad
Are you able to view this or do I need PRO or something?
Thanks in advance!
Auto columns sets your grid to work on columns instead of rows. Any additional items will be put in the next column. If you haven’t specified how many columns or what size it will just create more. Please watch some of KPs grid videos
https://youtube.com/playlist?list=PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998&si=8Wgq79Wz1YlkWJD3
YouTube
CSS Grid videos
The CSS Grid is here, and it's awesome. This playlist is a collection of all the videos I do where I use the CSS Grid, whether it's a tutorial specific to us...
I’m on my phone I’ll look when I get on my laptop
You could be getting some specificity issues from using both IDs and classes in your style sheet too
I changed the ids to classes as there are no reasons to raise the specificty here. I took off the height of the green line so it was able to span the whole grid. You werent explicly setting rows until you added it to the green-line grid area, but then you didnt tell the coloured boxes where to live in those rows.
no you did not understand
let me clarify again
if you are saying that a grid item to span across the entire space of the grid....where do you think the other grid items go?
it doesnt make sence right
that is why -1 is not taking any effect
but since u use grid-auto-columns: 1fr 1fr
that means syou have 2 colum grid
any number of items u have in grid will fit in the grid
like..
item1 item2
item3 item4
etc
but when u say item1 to have grid-area: 1 / 1 / -1 / -1
it will span to both columns
because it makes sence
that means.
item1 item1
item2 item3
item4
but -1 for the column doesnt make sence
because how can you say an item 1 to take up all rows, where there are more grid items later on
that is why you should never use 1 / 1 / -1 / -1
from what im understanding they want the green line in the very middle , so they are having it span both columns, then justifying to the center. since it has a fixed width on the green line, its not covering everything else; its overlapping. Thats one of the perks of grid, how easy it is to overlap. I'm not the OP btw, i put in some time to try and figure out if that codepen i posted is what they are trying to achieve.
Thank you!
Thank you for trying to explain
Is this what you were trying to accomplish ?
Yes, exactly. the other items needed row declarations
My gold star to you 🌟