Grid Template Columns & Rows: Explicit Tracks and Sizing Syntax

When you open a school accounts ledger or laboratory register, you don't make every column the exact same width with your ruler.

• The first column for Serial Number (S.No) is narrow—just 50 pixels wide.
• The second column for Experiment Title needs plenty of room to expand (auto).
• The third column for Teacher Signature needs a tidy, fixed 150-pixel stamp box.

+-------------------------------------------------------------------------+
|                  CUSTOM TRACK SIZING IN A SCHOOL LEDGER                 |
|                                                                         |
|  Col 1: 60px          Col 2: auto (Stretches)         Col 3: 140px      |
|  +--------------+----------------------------------+-----------------+  |
|  | S.No         | Experiment Title                 | Teacher Sign    |  |
|  |--------------+----------------------------------+-----------------|  |
|  | 01           | Verification of Ohm's Law        | [ Verified ]    |  |
|  |--------------+----------------------------------+-----------------|  |
|  | 02           | Refraction through Glass Prism   | [ Verified ]    |  |
|  +--------------+----------------------------------+-----------------+  |
+-------------------------------------------------------------------------+

In CSS Grid, the two master properties that carve out your layout blueprint are grid-template-columns and grid-template-rows. In this tutorial, you will master track sizing syntax, mixing fixed and fluid units, and understanding the difference between the Explicit Grid and the Implicit Grid.

1. Defining Columns with grid-template-columns

The grid-template-columns property defines the number of columns and their individual widths along the horizontal axis. Each space-separated value creates a new column track:

2. Defining Rows with grid-template-rows

Just as grid-template-columns carves vertical slices, grid-template-rows sets the heights of horizontal row tracks:

3. Mixing Units: Pixels, Percentages, and auto

One of the great advantages of CSS Grid over legacy table layouts is the ability to mix totally different units without breaking the layout:

What Does the auto Keyword Mean?

• A track with auto sizes itself around the natural intrinsic size of its content.
• If extra space remains in the grid container, auto tracks will also expand to absorb that leftover space.

4. The Explicit Grid vs The Implicit Grid

What happens if you define a blueprint for 2 rows, but your HTML has 10 cards? Where do the extra 8 cards go?

• Explicit Grid: The rows and columns you explicitly declared in your CSS using grid-template-columns and grid-template-rows.
• Implicit Grid: Extra tracks that the browser creates automatically to hold surplus HTML items that overflow your explicit blueprint.

Controlling the Implicit Grid: grid-auto-rows

By default, the browser gives implicit rows an auto height (sized to fit whatever content is inside). You can take control of implicit row heights using grid-auto-rows:

5. Common Mistakes to Avoid (Do's and Don'ts)

6. Quick Revision Summary (Cheat Sheet)

• grid-template-columns: Declares explicit column tracks (space-separated, NO commas!).
• grid-template-rows: Declares explicit row tracks and their heights.
• auto track sizing: Expands or shrinks according to the content inside that cell.
• Explicit Grid: Tracks explicitly written into grid-template-* declarations.
• Implicit Grid: Tracks automatically created by the browser when items overflow the explicit dimensions.
• grid-auto-rows: Sets the default height for all implicit rows created dynamically.

Multiple Choice Questions

1. Which CSS syntax correctly defines three columns of 100px, 300px, and 150px width?

A. grid-template-columns: 100px, 300px, 150px; B. grid-template-columns: 100px 300px 150px; C. grid-columns: 100px; 300px; 150px; D. columns: 3 (100px, 300px, 150px); Answer: B Explanation: Track sizes in CSS Grid must be space-separated without commas. Commas make the declaration invalid.

2. What happens when an HTML page contains 8 grid items, but the CSS only defines a 2-column by 2-row explicit grid?

A. The browser throws a fatal rendering error B. The surplus 4 items are automatically placed into newly created implicit rows C. The extra 4 items are deleted from the DOM D. All 8 items are crammed into the first cell Answer: B Explanation: The browser automatically constructs the implicit grid, creating additional rows or columns to house items that exceed the explicit template.

3. Which CSS property sets the default height of rows automatically created in the implicit grid?

A. grid-template-rows B. grid-auto-rows C. grid-implicit-height D. row-auto-size Answer: B Explanation: grid-auto-rows specifies the track size for any implicit row tracks generated by the browser.

4. Why is using grid-template-columns: 50% 50%; with gap: 20px; an anti-pattern?

A. Modern browsers do not support percentages in grid B. The total width becomes 50% + 50% + 20px = 100% + 20px, causing unwanted horizontal overflow scrollbars C. The gap is ignored when percentages are used D. It disables text rendering inside the cells Answer: B Explanation: Percentage track sizes do not account for grid gaps automatically. 100% total column width plus gap exceeds container bounds, causing overflow.

5. In the rule grid-template-columns: 80px auto 120px;, what does the auto track size do?

A. It locks the column to exactly 0px B. It sizes dynamically around its content and expands to claim available spare space C. It duplicates the 80px track D. It centers the whole website Answer: B Explanation: An auto track adapts to its inner content and absorbs available positive space along the grid axis.

7. Hands-on Practice Challenge: School Term Report Card Ledger

Construct a structured School Student Grade Sheet using custom track sizing:

1. 1
   Define a 4-column explicit grid using grid-template-columns: 70px 1fr 120px 140px; (Roll No, Student Name, Exam Score, Letter Grade).
2. 2
   Set explicit header row styling with grid-template-rows: 50px;.
3. 3
   Use grid-auto-rows: 48px; to ensure every subsequent student row has identical, uniform height automatically!