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 you open a school accounts ledger or laboratory register, you don't make every column the exact same width with your ruler.
auto).+-------------------------------------------------------------------------+ | 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.
grid-template-columnsThe 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:
grid-template-rowsJust as grid-template-columns carves vertical slices, grid-template-rows sets the heights of horizontal row tracks:
autoOne of the great advantages of CSS Grid over legacy table layouts is the ability to mix totally different units without breaking the layout:
auto Keyword Mean?auto sizes itself around the natural intrinsic size of its content.auto tracks will also expand to absorb that leftover space.What happens if you define a blueprint for 2 rows, but your HTML has 10 cards? Where do the extra 8 cards go?
grid-template-columns and grid-template-rows.grid-auto-rowsBy 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:
| Bad Practice (Don't) | Good Practice (Do) | Why? |
|---|---|---|
| Hardcoding fixed heights on every single row track | Use auto or minmax() | Fixed pixel row heights cause text to overflow when content grows on mobile. |
| Forgetting commas are NOT allowed between track sizes | Write space-separated values: 100px 1fr 200px | Putting commas (100px, 1fr, 200px) is invalid CSS syntax and breaks the grid! |
| Defining 20 explicit rows for an unknown database list | Define columns explicitly and use grid-auto-rows: min-content | Lets the database generate as many dynamic rows as needed cleanly. |
Using percentages (33.33% 33.33% 33.33%) with gaps | Use Fractional Units (1fr 1fr 1fr) | Percentage widths + gap causes horizontal overflow because 100% + gap > 100%! |
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.grid-template-* declarations.grid-auto-rows: Sets the default height for all implicit rows created dynamically.grid-template-columns: 50% 50%; with gap: 20px; an anti-pattern?grid-template-columns: 80px auto 120px;, what does the auto track size do?Construct a structured School Student Grade Sheet using custom track sizing:
grid-template-columns: 70px 1fr 120px 140px; (Roll No, Student Name, Exam Score, Letter Grade).grid-template-rows: 50px;.grid-auto-rows: 48px; to ensure every subsequent student row has identical, uniform height automatically!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.