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.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Have you ever looked at your school weekly timetable chart pinned to your classroom wall? Across the top, you have columns for the days of the week: Monday, Tuesday, Wednesday, Thursday, Friday. Down the side, you have rows for the periods: Period 1 (Maths), Period 2 (Physics), Recess, Period 3 (Chemistry).
If you tried to build this with Flexbox, you would have to create 5 separate column divs, each containing 6 separate period divs, and pray that the heights line up. Flexbox is 1-Dimensional—it thinks only in one direction at a time (row OR column).
CSS Grid is 2-Dimensional. It controls both rows AND columns simultaneously, just like a real spreadsheet, a chessboard, or a school timetable!
+-------------------------------------------------------------------------+ | THE 2D ARCHITECTURE OF CSS GRID | | | | Line 1 Line 2 Line 3 Line 4 | | | | | | | | 1 -+-----------------+-----------------+-----------------+- | | | [ Grid Cell ] | [ Grid Cell ] | [ Grid Cell ] | | | | (Maths Lab) | (English) | (History) | < Track Row 1| | 2 -+-----------------+-----------------+-----------------+- | | | [ Grid Cell ] | [ Grid Cell ] | [ Grid Cell ] | | | | (Chemistry) | (Computer) | (Sports) | < Track Row 2| | 3 -+-----------------+-----------------+-----------------+- | | ^ ^ ^ ^ | | | < Track Col 1 > | < Track Col 2 > | < Track Col 3 > | | +-------------------------------------------------------------------------+
In this tutorial, you will master the essential anatomy of CSS Grid: the Container, the Items, Tracks, Cells, and the numbered Grid Lines.
Before writing code, let us understand the 5 anatomical building blocks of CSS Grid:
| Term | Real-World School Analogy | Technical Definition |
|---|---|---|
| Grid Container | The blank wooden timetable board | The parent element with display: grid; |
| Grid Item | The period subject cards pinned onto the board | The direct child elements inside the container |
| Grid Lines | The black ruler lines drawn across the sheet | The invisible vertical & horizontal dividing lines (numbered starting at 1) |
| Grid Track | A full period row or a full Monday column | The space between two adjacent grid lines (any row or column) |
| Grid Cell | A single box for Tuesday Period 2 | The single intersection unit between one row track and one column track |
| Grid Area | A 2-hour Physics practical spanning 2 periods | A rectangular region made up of one or more adjacent grid cells |
display: gridJust like Flexbox, activating Grid requires setting the display property on the parent:
display: inline-grid;.One of the greatest features of CSS Grid is that the browser automatically numbers all dividing lines with positive and negative integers:
1, 2, 3...) count from top-to-bottom and left-to-right.-1, -2, -3...) count backwards from the right wall and bottom wall. Line -1 always represents the very last line of the grid, which is incredibly useful for full-width banners!Intermediate web developers often ask: "Should I use Flexbox or CSS Grid?" Here is the golden engineering rule:
+------------------------------------+------------------------------------+ | USE FLEXBOX WHEN: | USE CSS GRID WHEN: | +------------------------------------+------------------------------------+ | Layout is 1-Dimensional | Layout is 2-Dimensional | | (Either a Row OR a Column) | (Rows AND Columns simultaneously) | | | | | Sizing is content-driven | Sizing is layout-driven | | (Buttons size around their text) | (Cards lock into strict alignments)| | | | | Examples: Navbars, button groups, | Examples: Full page layouts, | | tags, breadcrumbs, search bars | image galleries, dashboards | +------------------------------------+------------------------------------+
| Bad Practice (Don't) | Good Practice (Do) | Why? |
|---|---|---|
| Forcing Flexbox into 2D layouts using complex percentage widths | Use display: grid | Eliminates rounding errors, wrapping quirks, and manual margin calculations. |
| Forgetting that line numbering starts at 1, not 0 | Grid lines are 1-indexed (Line 1 is the outer border) | Unlike programming arrays, CSS Grid lines start at index 1. |
| Trying to use CSS Grid for a simple 3-link horizontal navbar | Use Flexbox for 1D single-line ribbons | Flexbox is more nimble for 1-dimensional content-driven flows. |
| Putting grid placement rules on grandchildren | Apply rules only to direct children (grid items) | Just like Flexbox, Grid relationships only exist between parent and direct children. |
display: grid; on the parent container. Its direct children become grid items.1, 2, 3... (forward) and -1, -2, -3... (backward).Build a foundational 2-dimensional School Daily Timetable grid:
.timetable-board) with display: grid;.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.