Beginner LevelCSS & Modern Layouts
How does CSS Grid work with grid-template-columns and grid-template-rows?
❓ Interview Prompt: Explain CSS Grid track definitions, the fr unit, repeat() function, and minmax() for responsive grids.
CSS Grid is a two-dimensional layout system that lets you define explicit rows and columns (called tracks).
Key Concepts:
•
`grid-template-columns`: Defines column track sizes (e.g.
200px 1fr 1fr creates one 200px column and two equal flexible columns).•
`grid-template-rows`: Defines row track sizes.
•
`fr` (fractional unit): Distributes remaining free space proportionally.
1fr 2fr gives the second column twice the space.•
`repeat()`: Shorthand for repeating track patterns.
repeat(3, 1fr) = three equal columns.•
`minmax()`: Sets a minimum and maximum track size.
minmax(200px, 1fr) ensures columns are at least 200px.•
`auto-fit` / `auto-fill`: Automatically creates as many columns as fit the container width.
Code Implementation Example
css
/* Responsive card grid: auto-fit columns, minimum 280px */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
padding: 24px;
}
/* Explicit named layout areas */
.page-layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 40px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}💡Responsive auto-fit card grid and named grid-template-areas layout.
🎯 Interview Key Takeaway
Use repeat(auto-fit, minmax(280px, 1fr)) for responsive card grids that automatically adjust column count.
#CSS Grid#Responsive#Layout#Beginner
Back to all CSS & Modern Layouts Questions→