CSS Grid Layout is the most powerful layout system available in CSS. It is a 2D system, meaning it can handle both columns and rows, making it the perfect tool for large-scale page structure and complex component layouts.
1The Fractional Unit (fr)
The fr unit is the heart of Grid. It represents a fraction of the available space. If you have 1fr 2fr 1fr, the container is divided into 4 parts: the middle column takes 2/4 (50%) and the sides take 1/4 (25%) each. Unlike percentages, fr units subtract gaps automatically, meaning you'll never have overflow due to grid spacing.
2Named Areas
One of Grid's best features is grid-template-areas. You can define a visual map of your page using strings.
- →Blueprint:
grid-template-areas: 'header header' 'sidebar main'; - →Assignment: On the child element, use
grid-area: header;.
This makes your CSS extremely readable and allows you to change your entire page layout for mobile just by reordering the strings in a media query.
