HTML & CSS
/Advanced
Grid Template
Definition
The `grid-template-columns` and `grid-template-rows` properties define the line names and track sizing functions of the grid columns and rows.
Explain Like I'm New
This is where you draw the blueprint. You can say: 'I want 3 columns. The first one should be exactly 200px wide. The second one should take up all remaining space (1fr). The third one should be exactly 50px wide'.
Real World Example
A dashboard layout: `grid-template-columns: 250px 1fr;`. The sidebar is locked at 250px wide, and the dashboard content dynamically fills the rest of the screen.
Common Use Cases
- •Sidebar + Main content layouts
- •Asymmetrical grids
Interactive Example
Interview Questions
basic
- What does `grid-template-columns: 100px 100px;` do?
intermediate
- What does the `repeat()` function do?