Grid Container and Tracks
CSS Grid is a two-dimensional layout system designed to control rows and columns simultaneously. A grid container defines explicit or implicit tracks and places child elements into the resulting grid.
The fr unit represents a share of available grid space after fixed and intrinsic requirements are considered.
CSS Grid Tracks
Two-Column Grid
.layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 2rem;
}💡 The first column is 240px while the second consumes remaining available space.
Key Takeaways
- Grid is two-dimensional.
frdistributes available space between flexible tracks.
Knowledge Check
What is CSS Grid particularly suited for?