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)
Tok124 (CSS Nerd)β€’3mo ago
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
snxxwyyβ€’3mo ago
So subgrid aligns the content with the parents content?
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)β€’3mo ago
Yeah
snxxwyy
snxxwyyβ€’3mo ago
How does it align it if you don’t mind me asking?
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)β€’3mo ago
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)
Tok124 (CSS Nerd)β€’3mo ago
Here you can see the grid and subgrid in the devtools
No description
snxxwyy
snxxwyyβ€’3mo 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)
Tok124 (CSS Nerd)β€’3mo ago
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
snxxwyyβ€’3mo ago
Oh yeah I see that now, cool, I think I understand, I appreciate your help
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)β€’3mo ago
No problem πŸ™‚