subgrid vs inherit

Could someone please explain the difference between defining grid-template-columns: subgrid; and grid-template-columns: inherit;? Thanks in advance.
10 Replies
Tok124 (CSS Nerd)
Here you have a quick example. With subgrid, you borrow columns from the main grid. with inherit, you create new columns.
No description
No description
snxxwyy
snxxwyyOP11mo ago
So subgrid aligns the content with the parents content?
Tok124 (CSS Nerd)
Yeah
snxxwyy
snxxwyyOP11mo ago
How does it align it if you don’t mind me asking?
Tok124 (CSS Nerd)
Well, you see in the screenshots that i sent how it aligns it. It aligns it according to how you have defined your columns in the parent grid container.
Tok124 (CSS Nerd)
Here you can see the grid and subgrid in the devtools
No description
snxxwyy
snxxwyyOP11mo ago
So if your parent has 4 columns it aligns into 4, but since yours had two it aligned into two? And I see with the grid lines it carried on incrementing the numbers (3-4 & 4-5), since inherit would have created a new grid, would that have created 1-2 & 2-3 over again?
Tok124 (CSS Nerd)
i have 4 columns. i repeat auto 1fr 2 times. So thats 4 columns but using repeat function instead of writing auto 1fr auto 1fr so i wrote repeat(2, auto 1fr)
snxxwyy
snxxwyyOP11mo ago
Oh yeah I see that now, cool, I think I understand, I appreciate your help
Tok124 (CSS Nerd)
No problem 🙂

Did you find this page helpful?