MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
When the student editorial committee designs the school wall magazine on a large white chart paper, they don't start by calculating coordinates or matrix multiplication.
The chief student editor takes a thick black sketch pen and sketches big rectangular zones:
+-------------------------------------------------------------------------+ | SKETCHING THE SCHOOL WALL MAGAZINE | | | | +-------------------------------------------------------------------+ | | | BANNER | | | +-------------------------------------------------------------------+ | | | CIRCULARS | ARTICLES | ADS | | | +-------------------------------------------------------------------+ | | | CREDITS | | | +-------------------------------------------------------------------+ | +-------------------------------------------------------------------------+
Wouldn't it be magical if you could write your CSS layout in the exact same intuitive, visual way? With grid-template-areas, you literally draw your layout directly inside your CSS code using text words!
In this tutorial, you will master grid-template-areas, how to map child elements with grid-area, using the empty cell dot operator (.), and responsive layout switching without touching HTML.
grid-template-areasThe grid-template-areas property allows you to define named rectangular regions across your grid tracks. Each string in double quotes represents one horizontal row:
Look at that CSS code! Even someone who has never studied web development can read those three lines of text and instantly visualize how the page will look on screen.
grid-area PropertyOnce the parent container has painted the blueprint, each child element connects to its assigned region using the grid-area property:
You do not need to write grid-column: 1 / 4; or calculate start and end line indices. The browser connects the child to the zone automatically!
.) OperatorWhat if you want an intentional empty blank space in your layout—for example, you have no sponsors today and want the top-right corner to remain empty?
In CSS Grid, a period (.) or multiple consecutive dots (...) represents an empty, unoccupied grid cell:
Here is where grid-template-areas shows its true genius. On a mobile smartphone, a 3-column layout cannot fit.
To redesign your entire website for mobile phones, you do not touch a single line of HTML. You simply redefine the grid-template-areas strings inside a media query:
Notice how on mobile, the sidebar naturally slipped beneath the main article, without any JavaScript DOM rearrangement!
In addition to named areas, CSS Grid allows you to assign custom descriptive names to individual grid lines inside brackets [...]:
| Bad Practice (Don't) | Good Practice (Do) | Why? |
|---|---|---|
| Creating non-rectangular L-shaped or T-shaped areas | Every area must form a strict, solid rectangle | The CSS Grid specification strictly prohibits non-rectangular or fragmented areas. |
| Forgetting to give every row the exact same number of cell tokens | Ensure every quoted row string has the identical number of words | If row 1 has 3 tokens and row 2 has 2 tokens, the entire declaration is invalid! |
Quoting the child's grid-area value (grid-area: "header";) | Write the name unquoted: grid-area: header; | grid-area takes an unquoted identifier; quotes cause invalid CSS parsing. |
Forgetting to define grid-template-columns alongside areas | Always declare explicit track widths with grid-template-columns | Without explicit tracks, columns default to auto, which can cause uneven widths. |
grid-template-areas: An ASCII-like string mapping of named regions in CSS quotes.grid-area: name: Connects a child element to its corresponding named region without quotes..): Leaves a grid cell intentionally blank.grid-template-areas inside @media (max-width: 768px) reshuffles page sections effortlessly.grid-template-areas row?<main> tag to a named area called content?grid-template-areas contain the exact same number of cell tokens?Build a complete school portal layout using grid-template-areas:
grid-area.<= 768px) that cleanly refactors the layout into a single vertical stack!Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.