CSS grid item not spanning across my browser
Hello, I defined in my grid container that I wanted 5 explicit columns each of them are sized 1fr. When I tried to span my image across the browser by putting grid-column: 1 / 5; It does span the entirety of the browser and all my other grid items are pushed against. Can someone help me with this?
https://codepen.io/davesamuels1998/pen/OJqgOOR
10 Replies
it should be 6 or you can do -1 🙂
grid-column works with the grid-line count (start/end). if you have 5 columns, you have 6 lines
| col | col | col | col | col | <= count the
|s
so, in your case it would be grid-column: 1/6 or you can use the negative count to start from the back grid-column: 1/-1Ok thanks! Is there a way to see the actual lines in the browser. It can get confusing
yes in the devtools, with inspect element you can see them if you select the element
click the grid label to turn on the lines 🙂
Thanks I found it!
you can also show the line numbers/names (somewhere hidden in the settings, depends on the browser)
@MarkBoots @MarkBoots Sorry for the pings. So I tackled this coding example with line numbers. Now I am trying to translate this into line names using grid-template-areas and I am stuck.
I commented out what I had before on codepen
I don't know how to get grid items to overlap on the grid/line with grid area.
I don't have the time right now to look at it, but you can maybe watch this video of kevin to get some more understanding of it
https://www.youtube.com/watch?v=cf-J4ffMBfo
Kevin Powell
YouTube
Probably the most underrated (and useful) CSS feature
Looking to step up your CSS games? I’ve got free and premium courses to help you out! 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=named-grid-lines
I don’t think I’m alone in not using named grid lines very often. They are something I dismissed early on because I figured line numbers were good enough and f...