When a learner can reproduce a familiar example but a small variation causes confusion, the problem is usually an incomplete model rather than a lack of effort. The fastest useful response is to expose the hidden state and test one boundary at a time.

CSS Subgrid lets a nested grid adopt the portion of its parent grid that it spans on one or both axes, so descendants can align to parent grid lines and contribute content-based sizing information back into shared tracks. Mastery means establishing the parent grid first, spanning the intended tracks, applying subgrid to the correct axis, predicting line correspondence and gap behaviour, distinguishing a subgrid from an independent nested grid, and testing real content, writing modes, zoom and fallback rather than approving one tidy screenshot. This guide begins with that mechanism, then develops it through worked traces, deliberate mistakes, explained practice and transfer decisions.

The aim is independent reasoning. A learner should be able to predict behaviour, locate the earliest wrong assumption, use a safe diagnostic procedure and defend a design choice in a new project.

Punggol families can use the guide in short sessions around homework, CCAs and rest. The activities are proposed learning exercises, not claims about a physical branch, timetable, class size, fee, school relationship or guaranteed result.

Use disposable data and repositories, preserve backups, and check version-sensitive details against the official source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.

The element needs grid layout and uses subgrid as the track definition for an axis; subgrid is not a separate display value. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is writing display:subgrid and wondering why the declaration is invalid. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for A subgrid is still a grid container, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the A subgrid is still a grid container chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on writing display:subgrid and wondering why the declaration is invalid. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.parent{display:grid;grid-template-columns:10rem 1fr}.child{display:grid;grid-template-columns:subgrid}

Four purposeful transfer cases

Case 1: revision cards. Predict the rule using titles, notes and actions align across cards with different content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: parent dashboard. Contrast the rule using subject panels share a common label and value grid. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: science form. Stress-test the rule using nested label-input rows align with outer columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: CCA timetable. Explain the rule using nested sessions inherit day columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers writing display:subgrid and wondering why the declaration is invalid.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for A subgrid is still a grid container, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from A subgrid is still a grid container?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing writing display:subgrid and wondering why the declaration is invalid be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny mobile layout with one axis remains aligned while the other becomes content-driven. Include one ordinary case, one boundary and one deliberate failure caused by writing display:subgrid and wondering why the declaration is invalid. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For A subgrid is still a grid container, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

A subgridded axis derives its track sizes from the parent grid rather than declaring independent sizes. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is placing subgrid on a child of a non-grid parent and expecting global page columns. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for The parent grid establishes shared tracks, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the The parent grid establishes shared tracks chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on placing subgrid on a child of a non-grid parent and expecting global page columns. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.parent{display:grid;grid-template-columns:12rem minmax(0,1fr)}.child{display:grid;grid-template-columns:subgrid}

Four purposeful transfer cases

Case 1: science form. Contrast the rule using nested label-input rows align with outer columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: CCA timetable. Stress-test the rule using nested sessions inherit day columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: library catalogue. Explain the rule using metadata fields line up across repeated records. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: mobile layout. Transfer the rule using one axis remains aligned while the other becomes content-driven. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers placing subgrid on a child of a non-grid parent and expecting global page columns.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for The parent grid establishes shared tracks, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from The parent grid establishes shared tracks?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing placing subgrid on a child of a non-grid parent and expecting global page columns be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny test laboratory with long text, missing fields, spans and zoom expose track behaviour. Include one ordinary case, one boundary and one deliberate failure caused by placing subgrid on a child of a non-grid parent and expecting global page columns. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For The parent grid establishes shared tracks, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

The number and identity of adopted tracks come from the grid area the subgrid item spans in its parent. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is declaring subgrid but leaving the item in one parent column. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for The subgrid must span the intended parent tracks, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the The subgrid must span the intended parent tracks chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on declaring subgrid but leaving the item in one parent column. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.child{grid-column:1 / 3;display:grid;grid-template-columns:subgrid}

Four purposeful transfer cases

Case 1: library catalogue. Stress-test the rule using metadata fields line up across repeated records. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: mobile layout. Explain the rule using one axis remains aligned while the other becomes content-driven. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: test laboratory. Transfer the rule using long text, missing fields, spans and zoom expose track behaviour. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: design decision. Predict the rule using subgrid is compared with standalone Grid, Flexbox and repeated track definitions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers declaring subgrid but leaving the item in one parent column.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for The subgrid must span the intended parent tracks, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from The subgrid must span the intended parent tracks?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing declaring subgrid but leaving the item in one parent column be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design decision with subgrid is compared with standalone Grid, Flexbox and repeated track definitions. Include one ordinary case, one boundary and one deliberate failure caused by declaring subgrid but leaving the item in one parent column. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For The subgrid must span the intended parent tracks, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

grid-template-columns:subgrid adopts columns while rows can remain an independent nested grid. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is assuming the keyword automatically applies to both axes. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Columns can be subgridded alone, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Columns can be subgridded alone chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming the keyword automatically applies to both axes. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.child{display:grid;grid-template-columns:subgrid;grid-template-rows:auto 1fr auto}

Four purposeful transfer cases

Case 1: test laboratory. Explain the rule using long text, missing fields, spans and zoom expose track behaviour. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: design decision. Transfer the rule using subgrid is compared with standalone Grid, Flexbox and repeated track definitions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: revision cards. Predict the rule using titles, notes and actions align across cards with different content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: parent dashboard. Contrast the rule using subject panels share a common label and value grid. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers assuming the keyword automatically applies to both axes.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Columns can be subgridded alone, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Columns can be subgridded alone?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming the keyword automatically applies to both axes be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny revision cards with titles, notes and actions align across cards with different content. Include one ordinary case, one boundary and one deliberate failure caused by assuming the keyword automatically applies to both axes. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Columns can be subgridded alone, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

grid-template-rows:subgrid adopts rows while columns can be independently defined. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is using column subgrid when the actual alignment problem is card rows. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Rows can be subgridded alone, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Rows can be subgridded alone chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using column subgrid when the actual alignment problem is card rows. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.card{grid-row:span 3;display:grid;grid-template-rows:subgrid;grid-template-columns:1fr}

Four purposeful transfer cases

Case 1: revision cards. Transfer the rule using titles, notes and actions align across cards with different content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: parent dashboard. Predict the rule using subject panels share a common label and value grid. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: science form. Contrast the rule using nested label-input rows align with outer columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: CCA timetable. Stress-test the rule using nested sessions inherit day columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers using column subgrid when the actual alignment problem is card rows.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Rows can be subgridded alone, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Rows can be subgridded alone?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using column subgrid when the actual alignment problem is card rows be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny parent dashboard with subject panels share a common label and value grid. Include one ordinary case, one boundary and one deliberate failure caused by using column subgrid when the actual alignment problem is card rows. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Rows can be subgridded alone, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

An element may use subgrid for rows and columns when it spans parent tracks in both dimensions. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is subgridding both axes without an explicit parent span and getting too few tracks. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Both axes can be subgridded, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Both axes can be subgridded chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on subgridding both axes without an explicit parent span and getting too few tracks. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.item{grid-area:1 / 1 / 4 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}

Four purposeful transfer cases

Case 1: science form. Predict the rule using nested label-input rows align with outer columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: CCA timetable. Contrast the rule using nested sessions inherit day columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: library catalogue. Stress-test the rule using metadata fields line up across repeated records. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: mobile layout. Explain the rule using one axis remains aligned while the other becomes content-driven. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers subgridding both axes without an explicit parent span and getting too few tracks.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Both axes can be subgridded, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Both axes can be subgridded?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing subgridding both axes without an explicit parent span and getting too few tracks be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny science form with nested label-input rows align with outer columns. Include one ordinary case, one boundary and one deliberate failure caused by subgridding both axes without an explicit parent span and getting too few tracks. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Both axes can be subgridded, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Subgrid line 1 corresponds to the first parent line of the area it spans, so descendant placement can align with outer tracks. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is using page-wide parent line numbers directly inside every subgrid. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Grid lines correspond across the boundary, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Grid lines correspond across the boundary chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using page-wide parent line numbers directly inside every subgrid. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.child{grid-column:2 / 5;display:grid;grid-template-columns:subgrid}.label{grid-column:1}.value{grid-column:2 / 4}

Four purposeful transfer cases

Case 1: library catalogue. Contrast the rule using metadata fields line up across repeated records. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: mobile layout. Stress-test the rule using one axis remains aligned while the other becomes content-driven. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: test laboratory. Explain the rule using long text, missing fields, spans and zoom expose track behaviour. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: design decision. Transfer the rule using subgrid is compared with standalone Grid, Flexbox and repeated track definitions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers using page-wide parent line numbers directly inside every subgrid.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Grid lines correspond across the boundary, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Grid lines correspond across the boundary?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using page-wide parent line numbers directly inside every subgrid be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA timetable with nested sessions inherit day columns. Include one ordinary case, one boundary and one deliberate failure caused by using page-wide parent line numbers directly inside every subgrid. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Grid lines correspond across the boundary, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Relevant line names from the parent are inherited into the subgridded axis, adjusted to the child’s local correspondence. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is duplicating line names manually and letting parent and child drift. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Parent line names are available in the subgrid, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Parent line names are available in the subgrid chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on duplicating line names manually and letting parent and child drift. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.parent{display:grid;grid-template-columns:[label] 10rem [value] 1fr [end]}.child{grid-column:label / end;display:grid;grid-template-columns:subgrid}

Four purposeful transfer cases

Case 1: test laboratory. Stress-test the rule using long text, missing fields, spans and zoom expose track behaviour. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: design decision. Explain the rule using subgrid is compared with standalone Grid, Flexbox and repeated track definitions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: revision cards. Transfer the rule using titles, notes and actions align across cards with different content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: parent dashboard. Predict the rule using subject panels share a common label and value grid. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers duplicating line names manually and letting parent and child drift.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Parent line names are available in the subgrid, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Parent line names are available in the subgrid?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing duplicating line names manually and letting parent and child drift be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library catalogue with metadata fields line up across repeated records. Include one ordinary case, one boundary and one deliberate failure caused by duplicating line names manually and letting parent and child drift. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Parent line names are available in the subgrid, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

A subgrid track declaration can include additional line-name lists without replacing the parent track sizes. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is trying to add a length beside subgrid, which is not an independent track list. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Subgrid can add local line names, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Subgrid can add local line names chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on trying to add a length beside subgrid, which is not an independent track list. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.child{display:grid;grid-template-columns:subgrid [local-start] [local-middle] [local-end]}

Four purposeful transfer cases

Case 1: revision cards. Explain the rule using titles, notes and actions align across cards with different content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: parent dashboard. Transfer the rule using subject panels share a common label and value grid. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: science form. Predict the rule using nested label-input rows align with outer columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: CCA timetable. Contrast the rule using nested sessions inherit day columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers trying to add a length beside subgrid, which is not an independent track list.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Subgrid can add local line names, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Subgrid can add local line names?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing trying to add a length beside subgrid, which is not an independent track list be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny mobile layout with one axis remains aligned while the other becomes content-driven. Include one ordinary case, one boundary and one deliberate failure caused by trying to add a length beside subgrid, which is not an independent track list. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Subgrid can add local line names, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

A subgrid uses the parent grid’s gap in the subgridded axis by default, preserving alignment through the nested boundary. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is adding the same gap everywhere and later changing only one copy. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Gaps are inherited by default, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Gaps are inherited by default chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on adding the same gap everywhere and later changing only one copy. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.parent{display:grid;column-gap:1rem}.child{display:grid;grid-template-columns:subgrid}

Four purposeful transfer cases

Case 1: science form. Transfer the rule using nested label-input rows align with outer columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: CCA timetable. Predict the rule using nested sessions inherit day columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: library catalogue. Contrast the rule using metadata fields line up across repeated records. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: mobile layout. Stress-test the rule using one axis remains aligned while the other becomes content-driven. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers adding the same gap everywhere and later changing only one copy.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Gaps are inherited by default, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Gaps are inherited by default?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adding the same gap everywhere and later changing only one copy be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny test laboratory with long text, missing fields, spans and zoom expose track behaviour. Include one ordinary case, one boundary and one deliberate failure caused by adding the same gap everywhere and later changing only one copy. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Gaps are inherited by default, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Declaring row-gap or column-gap on the subgrid changes its local gutter treatment while track correspondence remains defined. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is assuming an overridden gap creates an independent track system. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for A subgrid can override its gap, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the A subgrid can override its gap chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming an overridden gap creates an independent track system. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.child{display:grid;grid-template-columns:subgrid;column-gap:0}

Four purposeful transfer cases

Case 1: library catalogue. Predict the rule using metadata fields line up across repeated records. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: mobile layout. Contrast the rule using one axis remains aligned while the other becomes content-driven. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: test laboratory. Stress-test the rule using long text, missing fields, spans and zoom expose track behaviour. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: design decision. Explain the rule using subgrid is compared with standalone Grid, Flexbox and repeated track definitions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers assuming an overridden gap creates an independent track system.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for A subgrid can override its gap, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from A subgrid can override its gap?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming an overridden gap creates an independent track system be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design decision with subgrid is compared with standalone Grid, Flexbox and repeated track definitions. Include one ordinary case, one boundary and one deliberate failure caused by assuming an overridden gap creates an independent track system. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For A subgrid can override its gap, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

The subgrid item’s padding, border and margin participate in layout around the shared track geometry and can create apparent offsets. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is blaming subgrid line calculation while an inner padding shifts content. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Padding and borders affect the subgrid box, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Padding and borders affect the subgrid box chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on blaming subgrid line calculation while an inner padding shifts content. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.child{display:grid;grid-template-columns:subgrid;padding-inline:1rem;border:1px solid}

Four purposeful transfer cases

Case 1: test laboratory. Contrast the rule using long text, missing fields, spans and zoom expose track behaviour. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: design decision. Stress-test the rule using subgrid is compared with standalone Grid, Flexbox and repeated track definitions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: revision cards. Explain the rule using titles, notes and actions align across cards with different content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: parent dashboard. Transfer the rule using subject panels share a common label and value grid. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers blaming subgrid line calculation while an inner padding shifts content.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Padding and borders affect the subgrid box, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Padding and borders affect the subgrid box?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing blaming subgrid line calculation while an inner padding shifts content be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny revision cards with titles, notes and actions align across cards with different content. Include one ordinary case, one boundary and one deliberate failure caused by blaming subgrid line calculation while an inner padding shifts content. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Padding and borders affect the subgrid box, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Content inside the subgrid can contribute to intrinsic size calculations of tracks shared with the parent. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is expecting parent auto tracks to ignore long nested labels. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Subgrid descendants contribute intrinsic sizing, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Subgrid descendants contribute intrinsic sizing chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on expecting parent auto tracks to ignore long nested labels. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.parent{display:grid;grid-template-columns:max-content 1fr}.child{grid-column:1 / 3;display:grid;grid-template-columns:subgrid}

Four purposeful transfer cases

Case 1: revision cards. Stress-test the rule using titles, notes and actions align across cards with different content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: parent dashboard. Explain the rule using subject panels share a common label and value grid. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: science form. Transfer the rule using nested label-input rows align with outer columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: CCA timetable. Predict the rule using nested sessions inherit day columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers expecting parent auto tracks to ignore long nested labels.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Subgrid descendants contribute intrinsic sizing, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Subgrid descendants contribute intrinsic sizing?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing expecting parent auto tracks to ignore long nested labels be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny parent dashboard with subject panels share a common label and value grid. Include one ordinary case, one boundary and one deliberate failure caused by expecting parent auto tracks to ignore long nested labels. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Subgrid descendants contribute intrinsic sizing, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Its explicit tracks correspond to the parent tracks it spans; it does not freely create unrelated implicit tracks in that axis. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is placing a child beyond the adopted track range and expecting endless implicit columns. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for The subgridded axis has a fixed explicit span, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the The subgridded axis has a fixed explicit span chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on placing a child beyond the adopted track range and expecting endless implicit columns. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.child{grid-column:span 2;display:grid;grid-template-columns:subgrid}.inside{grid-column:1 / 3}

Four purposeful transfer cases

Case 1: science form. Explain the rule using nested label-input rows align with outer columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: CCA timetable. Transfer the rule using nested sessions inherit day columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: library catalogue. Predict the rule using metadata fields line up across repeated records. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: mobile layout. Contrast the rule using one axis remains aligned while the other becomes content-driven. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers placing a child beyond the adopted track range and expecting endless implicit columns.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for The subgridded axis has a fixed explicit span, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from The subgridded axis has a fixed explicit span?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing placing a child beyond the adopted track range and expecting endless implicit columns be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny science form with nested label-input rows align with outer columns. Include one ordinary case, one boundary and one deliberate failure caused by placing a child beyond the adopted track range and expecting endless implicit columns. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For The subgridded axis has a fixed explicit span, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Children can be auto-placed in the subgrid, but the available cells and flow are bounded by the adopted track structure. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is reading automatic placement as random alignment with outer siblings. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Auto-placement works inside the shared tracks, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Auto-placement works inside the shared tracks chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on reading automatic placement as random alignment with outer siblings. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.child{display:grid;grid-template-columns:subgrid;grid-auto-flow:column}

Four purposeful transfer cases

Case 1: library catalogue. Transfer the rule using metadata fields line up across repeated records. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: mobile layout. Predict the rule using one axis remains aligned while the other becomes content-driven. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: test laboratory. Contrast the rule using long text, missing fields, spans and zoom expose track behaviour. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: design decision. Stress-test the rule using subgrid is compared with standalone Grid, Flexbox and repeated track definitions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers reading automatic placement as random alignment with outer siblings.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Auto-placement works inside the shared tracks, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Auto-placement works inside the shared tracks?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing reading automatic placement as random alignment with outer siblings be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA timetable with nested sessions inherit day columns. Include one ordinary case, one boundary and one deliberate failure caused by reading automatic placement as random alignment with outer siblings. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Auto-placement works inside the shared tracks, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

A parent can define repeated row tracks so card titles, bodies and actions align even when text lengths differ. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is forcing fixed heights on every card and clipping larger text. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Card rows are a strong subgrid use case, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Card rows are a strong subgrid use case chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on forcing fixed heights on every card and clipping larger text. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.cards{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto auto auto}.card{grid-row:span 3;display:grid;grid-template-rows:subgrid}

Four purposeful transfer cases

Case 1: test laboratory. Predict the rule using long text, missing fields, spans and zoom expose track behaviour. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: design decision. Contrast the rule using subgrid is compared with standalone Grid, Flexbox and repeated track definitions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: revision cards. Stress-test the rule using titles, notes and actions align across cards with different content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: parent dashboard. Explain the rule using subject panels share a common label and value grid. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers forcing fixed heights on every card and clipping larger text.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Card rows are a strong subgrid use case, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Card rows are a strong subgrid use case?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing forcing fixed heights on every card and clipping larger text be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library catalogue with metadata fields line up across repeated records. Include one ordinary case, one boundary and one deliberate failure caused by forcing fixed heights on every card and clipping larger text. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Card rows are a strong subgrid use case, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Each form row can remain a bordered wrapper while its label and control align to parent columns through a column subgrid. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is removing useful wrappers solely to make direct children fit the parent grid. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Forms can preserve semantic wrappers and alignment, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Forms can preserve semantic wrappers and alignment chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on removing useful wrappers solely to make direct children fit the parent grid. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.form{display:grid;grid-template-columns:max-content 1fr}.row{grid-column:1 / 3;display:grid;grid-template-columns:subgrid}

Four purposeful transfer cases

Case 1: revision cards. Contrast the rule using titles, notes and actions align across cards with different content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: parent dashboard. Stress-test the rule using subject panels share a common label and value grid. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: science form. Explain the rule using nested label-input rows align with outer columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: CCA timetable. Transfer the rule using nested sessions inherit day columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers removing useful wrappers solely to make direct children fit the parent grid.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Forms can preserve semantic wrappers and alignment, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Forms can preserve semantic wrappers and alignment?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing removing useful wrappers solely to make direct children fit the parent grid be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny mobile layout with one axis remains aligned while the other becomes content-driven. Include one ordinary case, one boundary and one deliberate failure caused by removing useful wrappers solely to make direct children fit the parent grid. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Forms can preserve semantic wrappers and alignment, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

A descendant subgrid can adopt tracks from its immediate grid parent, allowing alignment through more than one structured layer. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is assuming any deep descendant can skip ancestors and attach directly to the page grid. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Nested subgrids can carry alignment further, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Nested subgrids can carry alignment further chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming any deep descendant can skip ancestors and attach directly to the page grid. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.section{display:grid;grid-template-columns:subgrid}.row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}

Four purposeful transfer cases

Case 1: science form. Stress-test the rule using nested label-input rows align with outer columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: CCA timetable. Explain the rule using nested sessions inherit day columns. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: library catalogue. Transfer the rule using metadata fields line up across repeated records. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: mobile layout. Predict the rule using one axis remains aligned while the other becomes content-driven. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers assuming any deep descendant can skip ancestors and attach directly to the page grid.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Nested subgrids can carry alignment further, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Nested subgrids can carry alignment further?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming any deep descendant can skip ancestors and attach directly to the page grid be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny test laboratory with long text, missing fields, spans and zoom expose track behaviour. Include one ordinary case, one boundary and one deliberate failure caused by assuming any deep descendant can skip ancestors and attach directly to the page grid. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Nested subgrids can carry alignment further, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

A standalone nested grid can be the base, with @supports replacing its track definition when subgrid is available. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is making content order or basic readability depend on feature support. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Progressive enhancement keeps the fallback readable, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Progressive enhancement keeps the fallback readable chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on making content order or basic readability depend on feature support. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.child{display:grid;grid-template-columns:10rem 1fr}@supports(grid-template-columns:subgrid){.child{grid-template-columns:subgrid}}

Four purposeful transfer cases

Case 1: library catalogue. Explain the rule using metadata fields line up across repeated records. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: mobile layout. Transfer the rule using one axis remains aligned while the other becomes content-driven. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: test laboratory. Predict the rule using long text, missing fields, spans and zoom expose track behaviour. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: design decision. Contrast the rule using subgrid is compared with standalone Grid, Flexbox and repeated track definitions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers making content order or basic readability depend on feature support.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Progressive enhancement keeps the fallback readable, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Progressive enhancement keeps the fallback readable?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing making content order or basic readability depend on feature support be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design decision with subgrid is compared with standalone Grid, Flexbox and repeated track definitions. Include one ordinary case, one boundary and one deliberate failure caused by making content order or basic readability depend on feature support. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Progressive enhancement keeps the fallback readable, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Use subgrid when descendants should share parent tracks; use standalone Grid for independent tracks and Flexbox for one-axis distribution. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is selecting subgrid because it is newer even when no cross-wrapper alignment exists. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Choose subgrid for cross-wrapper track alignment, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Choose subgrid for cross-wrapper track alignment chapter on CSS Subgrid, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on selecting subgrid because it is newer even when no cross-wrapper alignment exists. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.record{display:grid;grid-template-columns:subgrid}

Four purposeful transfer cases

Case 1: test laboratory. Transfer the rule using long text, missing fields, spans and zoom expose track behaviour. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: design decision. Predict the rule using subgrid is compared with standalone Grid, Flexbox and repeated track definitions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: revision cards. Contrast the rule using titles, notes and actions align across cards with different content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: parent dashboard. Stress-test the rule using subject panels share a common label and value grid. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers selecting subgrid because it is newer even when no cross-wrapper alignment exists.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Choose subgrid for cross-wrapper track alignment, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS Subgrid syntax. For this chapter, useful prompts are: “What did you expect from Choose subgrid for cross-wrapper track alignment?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing selecting subgrid because it is newer even when no cross-wrapper alignment exists be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny revision cards with titles, notes and actions align across cards with different content. Include one ordinary case, one boundary and one deliberate failure caused by selecting subgrid because it is newer even when no cross-wrapper alignment exists. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Choose subgrid for cross-wrapper track alignment, separate the documented CSS Subgrid mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Start with evidence, not a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but syntax fails, practise reference use. If routine cases are correct but boundaries fail, vary ties, defaults, unsupported inputs, ownership or missing paths. If explanations transfer, move to a small project.

Keep a weekly record with four lines: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning. A smaller case tomorrow is more useful than another hour of copying tonight.

Seek specialist help when cause and effect remain invisible after examples are reduced, when accessibility or data-loss implications are unclear, or when an important repository, database or application state may be at risk. Good support should make the learner’s reasoning more independent.

1. revision cards: model, boundary and recovery

Create a small revision cards using titles, notes and actions align across cards with different content. Combine “A subgrid is still a grid container” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

2. parent dashboard: model, boundary and recovery

Create a small parent dashboard using subject panels share a common label and value grid. Combine “Columns can be subgridded alone” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

3. science form: model, boundary and recovery

Create a small science form using nested label-input rows align with outer columns. Combine “Grid lines correspond across the boundary” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

4. CCA timetable: model, boundary and recovery

Create a small CCA timetable using nested sessions inherit day columns. Combine “Gaps are inherited by default” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

5. library catalogue: model, boundary and recovery

Create a small library catalogue using metadata fields line up across repeated records. Combine “Subgrid descendants contribute intrinsic sizing” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

6. mobile layout: model, boundary and recovery

Create a small mobile layout using one axis remains aligned while the other becomes content-driven. Combine “Card rows are a strong subgrid use case” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

7. test laboratory: model, boundary and recovery

Create a small test laboratory using long text, missing fields, spans and zoom expose track behaviour. Combine “Progressive enhancement keeps the fallback readable” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

8. design decision: model, boundary and recovery

Create a small design decision using subgrid is compared with standalone Grid, Flexbox and repeated track definitions. Combine “The parent grid establishes shared tracks” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Frequently asked questions

How long should a practice session be?

Use one complete prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.

Should every option or function be memorised?

No. Memorise the governing distinctions and practise retrieving the official reference. Understanding means predicting and explaining, not reciting a parameter list.

What if the result is correct but the explanation is weak?

Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.

Is the shortest solution the best?

Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.

When should official documentation be used?

Use it whenever syntax, supported types, SQL dialect behaviour or Git version details matter. Primary documentation settles the current contract.

How can a parent help without technical expertise?

Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.

How do we test transfer?

Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.

What should be saved after practice?

Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.

Can these exercises replace backups?

No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.

What counts as mastery?

The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.

Official and supporting references

• Primary technical documentation for CSS Subgrid
• eduKatePunggol: How Studying Works

Return to contents