Grid rows automatically created when no template rows defined?
Hey, I have 3 items in a
grid container and haven't defined any grid-template-rows however it's automatically created some (3) to hold the content.
1. Is this normal behavior?
2. Are these automatic rows something you can do things with such as make the elements share the same grid cell etc?
https://codepen.io/deerCabin/pen/MWMgmGL
Thanks in advance.2 Replies
If you declare
display: grid, every direct child will be placed in a grid cell by default. If you haven't defined any, it will make a new row for each one.
You can take one of those elements, and declare a grid-column: span 2, and it'll create a column, since one of the elements is spanning 2 of them, so it needs to create an extra one for that to work.
You can, if you want, change that to columns with grid-auto-flow: column, and then automatically created cells will make a column rather than a row.
These are all called implicit grid rows and columns, because you've never defined them anywhere, but the browser has to create them for you. If you define your rows and columns, that's creating explicit columns and rows.
You can still work with line numbers if you want overlapping content for some reason.Ahh i understand now, thank you Kevin