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 aspect-ratio gives a box a preferred width-to-height ratio; it is not an unconditional command that overrides the rest of layout. The ratio affects preferred sizing only when at least one size is automatic, then min/max constraints, automatic minimum sizes, content, flex and grid rules can influence the used dimensions. Replaced elements may have a natural ratio, the combined auto and ratio syntax can use a provisional specified ratio before the natural one is available, and box-sizing determines which box dimensions a bare ratio uses. Mastery means naming the ratio-determining axis, checking the actual size constraints, and separating box shape from image fitting. 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.

A ratio such as 16 / 9 states width divided by height for preferred sizing. 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 the slash as a CSS division expression that produces a length. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for aspect-ratio defines a preferred width-to-height ratio, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the aspect-ratio defines a preferred width-to-height ratio chapter on CSS aspect-ratio, 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 the slash as a CSS division expression that produces a length. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.video{width:320px;height:auto;aspect-ratio:16 / 9}

Four purposeful transfer cases

Case 1: homework cards. Predict the rule using subject tiles keep a stable shape while labels remain readable. 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: reading journal. Contrast the rule using book-cover frames use a ratio without cropping rules being confused with sizing. 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 gallery. Stress-test the rule using image placeholders reserve space before files load. 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 video. Explain the rule using responsive embeds keep a widescreen frame. 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 the slash as a CSS division expression that produces a length.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for aspect-ratio defines a preferred width-to-height ratio, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from aspect-ratio defines a preferred width-to-height ratio?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing reading the slash as a CSS division expression that produces a length be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library display with long titles expose automatic minimum and overflow decisions. Include one ordinary case, one boundary and one deliberate failure caused by reading the slash as a CSS division expression that produces a length. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For aspect-ratio defines a preferred width-to-height ratio, separate the documented CSS aspect-ratio 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

When width is definite and height is auto, the height can be transferred through the preferred ratio. 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 a fixed height and wondering why the ratio no longer determines it. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for A known width can determine an automatic height, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the A known width can determine an automatic height chapter on CSS aspect-ratio, 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 a fixed height and wondering why the ratio no longer determines it. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.card{width:240px;height:auto;aspect-ratio:4 / 3}

Four purposeful transfer cases

Case 1: science gallery. Contrast the rule using image placeholders reserve space before files load. 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 video. Stress-test the rule using responsive embeds keep a widescreen frame. 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: family timetable. Explain the rule using grid cards remain coherent across narrow and wide screens. 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: library display. Transfer the rule using long titles expose automatic minimum and overflow decisions. 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 a fixed height and wondering why the ratio no longer determines it.
• 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 known width can determine an automatic height, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from A known width can determine an automatic height?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adding a fixed height and wondering why the ratio no longer determines it 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 explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. Include one ordinary case, one boundary and one deliberate failure caused by adding a fixed height and wondering why the ratio no longer determines it. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For A known width can determine an automatic height, separate the documented CSS aspect-ratio 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

When height is definite and width is auto, the width can be derived from the ratio. 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 transfer works only from inline size to block size. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for A known height can determine an automatic width, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the A known height can determine an automatic width chapter on CSS aspect-ratio, 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 transfer works only from inline size to block size. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.poster{height:300px;width:auto;aspect-ratio:2 / 3}

Four purposeful transfer cases

Case 1: family timetable. Stress-test the rule using grid cards remain coherent across narrow and wide screens. 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: library display. Explain the rule using long titles expose automatic minimum and overflow decisions. 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 explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. 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 transfer works only from inline size to block size.
• 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 known height can determine an automatic width, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from A known height can determine an automatic width?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming the transfer works only from inline size to block size 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. Include one ordinary case, one boundary and one deliberate failure caused by assuming the transfer works only from inline size to block size. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For A known height can determine an automatic width, separate the documented CSS aspect-ratio 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 specification notes that a preferred ratio affects sizing only when at least one width or height is automatic. 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 treating aspect-ratio as stronger than two explicit dimensions. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Two non-auto sizes leave no preferred-size role for the ratio, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Two non-auto sizes leave no preferred-size role for the ratio chapter on CSS aspect-ratio, 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 treating aspect-ratio as stronger than two explicit dimensions. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.box{width:300px;height:100px;aspect-ratio:1 / 1}

Four purposeful transfer cases

Case 1: test laboratory. Explain the rule using explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. 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: homework cards. Predict the rule using subject tiles keep a stable shape while labels remain readable. 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: reading journal. Contrast the rule using book-cover frames use a ratio without cropping rules being confused with sizing. 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 treating aspect-ratio as stronger than two explicit dimensions.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Two non-auto sizes leave no preferred-size role for the ratio, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from Two non-auto sizes leave no preferred-size role for the ratio?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating aspect-ratio as stronger than two explicit dimensions be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework cards with subject tiles keep a stable shape while labels remain readable. Include one ordinary case, one boundary and one deliberate failure caused by treating aspect-ratio as stronger than two explicit dimensions. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Two non-auto sizes leave no preferred-size role for the ratio, separate the documented CSS aspect-ratio 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

With width and height auto, intrinsic contributions, available space and formatting-context rules help select a size before ratio transfer. 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 a ratio alone to invent one universal pixel size. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Both automatic sizes still participate in layout, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Both automatic sizes still participate in layout chapter on CSS aspect-ratio, 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 a ratio alone to invent one universal pixel size. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.tile{aspect-ratio:1 / 1}

Four purposeful transfer cases

Case 1: homework cards. Transfer the rule using subject tiles keep a stable shape while labels remain readable. 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: reading journal. Predict the rule using book-cover frames use a ratio without cropping rules being confused with sizing. 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 gallery. Contrast the rule using image placeholders reserve space before files load. 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 video. Stress-test the rule using responsive embeds keep a widescreen frame. 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 a ratio alone to invent one universal pixel size.
• 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 automatic sizes still participate in layout, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from Both automatic sizes still participate in layout?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing expecting a ratio alone to invent one universal pixel size be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny reading journal with book-cover frames use a ratio without cropping rules being confused with sizing. Include one ordinary case, one boundary and one deliberate failure caused by expecting a ratio alone to invent one universal pixel size. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Both automatic sizes still participate in layout, separate the documented CSS aspect-ratio 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 ratio grammar permits one positive number, interpreted as width divided by height with an omitted denominator of one. 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 aspect-ratio:2 as two pixels or a unitless zoom. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for A single number means that number over one, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the A single number means that number over one chapter on CSS aspect-ratio, 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 aspect-ratio:2 as two pixels or a unitless zoom. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.wide{width:200px;aspect-ratio:2}

Four purposeful transfer cases

Case 1: science gallery. Predict the rule using image placeholders reserve space before files load. 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 video. Contrast the rule using responsive embeds keep a widescreen frame. 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: family timetable. Stress-test the rule using grid cards remain coherent across narrow and wide screens. 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: library display. Explain the rule using long titles expose automatic minimum and overflow decisions. 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 aspect-ratio:2 as two pixels or a unitless zoom.
• 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 single number means that number over one, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from A single number means that number over one?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing reading aspect-ratio:2 as two pixels or a unitless zoom be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny science gallery with image placeholders reserve space before files load. Include one ordinary case, one boundary and one deliberate failure caused by reading aspect-ratio:2 as two pixels or a unitless zoom. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For A single number means that number over one, separate the documented CSS aspect-ratio 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

With auto alone, replaced elements use a natural ratio when they have one; ordinary non-replaced boxes do not gain a specified ratio. 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 every div to inherit an image-like ratio by default. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for auto is the initial value, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the auto is the initial value chapter on CSS aspect-ratio, 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 every div to inherit an image-like ratio by default. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

img{aspect-ratio:auto} .panel{aspect-ratio:auto}

Four purposeful transfer cases

Case 1: family timetable. Contrast the rule using grid cards remain coherent across narrow and wide screens. 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: library display. Stress-test the rule using long titles expose automatic minimum and overflow decisions. 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 explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. 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 every div to inherit an image-like ratio by default.
• 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 is the initial value, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from auto is the initial value?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing expecting every div to inherit an image-like ratio by default be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA video with responsive embeds keep a widescreen frame. Include one ordinary case, one boundary and one deliberate failure caused by expecting every div to inherit an image-like ratio by default. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For auto is the initial value, separate the documented CSS aspect-ratio 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 property can give an ordinary block, grid item or flex item a preferred ratio without turning it into a replaced element. 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 image-specific alignment and intrinsic rules now apply to the div. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for A bare ratio applies to non-replaced boxes, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the A bare ratio applies to non-replaced boxes chapter on CSS aspect-ratio, 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 image-specific alignment and intrinsic rules now apply to the div. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.avatar-frame{width:8rem;aspect-ratio:1 / 1}

Four purposeful transfer cases

Case 1: test laboratory. Stress-test the rule using explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. 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: homework cards. Transfer the rule using subject tiles keep a stable shape while labels remain readable. 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: reading journal. Predict the rule using book-cover frames use a ratio without cropping rules being confused with sizing. 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 image-specific alignment and intrinsic rules now apply to the div.
• 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 bare ratio applies to non-replaced boxes, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from A bare ratio applies to non-replaced boxes?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming image-specific alignment and intrinsic rules now apply to the div be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny family timetable with grid cards remain coherent across narrow and wide screens. Include one ordinary case, one boundary and one deliberate failure caused by assuming image-specific alignment and intrinsic rules now apply to the div. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For A bare ratio applies to non-replaced boxes, separate the documented CSS aspect-ratio 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

Images, video and other replaced elements may contribute a natural aspect ratio from their resource or attributes. 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 overriding media dimensions before deciding whether the intrinsic ratio is already correct. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Replaced elements can have a natural ratio, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Replaced elements can have a natural ratio chapter on CSS aspect-ratio, 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 overriding media dimensions before deciding whether the intrinsic ratio is already correct. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

img{max-width:100%;height:auto;aspect-ratio:auto}

Four purposeful transfer cases

Case 1: homework cards. Explain the rule using subject tiles keep a stable shape while labels remain readable. 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: reading journal. Transfer the rule using book-cover frames use a ratio without cropping rules being confused with sizing. 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 gallery. Predict the rule using image placeholders reserve space before files load. 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 video. Contrast the rule using responsive embeds keep a widescreen frame. 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 overriding media dimensions before deciding whether the intrinsic ratio is already correct.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Replaced elements can have a natural ratio, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from Replaced elements can have a natural ratio?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing overriding media dimensions before deciding whether the intrinsic ratio is already correct be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library display with long titles expose automatic minimum and overflow decisions. Include one ordinary case, one boundary and one deliberate failure caused by overriding media dimensions before deciding whether the intrinsic ratio is already correct. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Replaced elements can have a natural ratio, separate the documented CSS aspect-ratio 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

With auto and a ratio together, the specified ratio applies unless a replaced element has a natural ratio, which then takes over. 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 claiming the fallback ratio permanently overrides the image resource. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for auto plus a ratio can bridge replaced-element loading, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the auto plus a ratio can bridge replaced-element loading chapter on CSS aspect-ratio, 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 claiming the fallback ratio permanently overrides the image resource. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

img{width:100%;height:auto;aspect-ratio:auto 4 / 3}

Four purposeful transfer cases

Case 1: science gallery. Transfer the rule using image placeholders reserve space before files load. 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 video. Predict the rule using responsive embeds keep a widescreen frame. 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: family timetable. Contrast the rule using grid cards remain coherent across narrow and wide screens. 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: library display. Stress-test the rule using long titles expose automatic minimum and overflow decisions. 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 claiming the fallback ratio permanently overrides the image resource.
• 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 plus a ratio can bridge replaced-element loading, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from auto plus a ratio can bridge replaced-element loading?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing claiming the fallback ratio permanently overrides the image resource 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 explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. Include one ordinary case, one boundary and one deliberate failure caused by claiming the fallback ratio permanently overrides the image resource. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For auto plus a ratio can bridge replaced-element loading, separate the documented CSS aspect-ratio 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 specified ratio uses the box dimensions selected by box-sizing, while auto and auto-plus-ratio calculations use content-box dimensions as specified. 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 measuring the border box while reasoning from content-box numbers. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for box-sizing changes the dimensions used by a specified ratio, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the box-sizing changes the dimensions used by a specified ratio chapter on CSS aspect-ratio, 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 measuring the border box while reasoning from content-box numbers. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.thumb{box-sizing:border-box;width:200px;padding:20px;border:5px solid;aspect-ratio:1 / 1}

Four purposeful transfer cases

Case 1: family timetable. Predict the rule using grid cards remain coherent across narrow and wide screens. 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: library display. Contrast the rule using long titles expose automatic minimum and overflow decisions. 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 explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. 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 measuring the border box while reasoning from content-box numbers.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for box-sizing changes the dimensions used by a specified ratio, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from box-sizing changes the dimensions used by a specified ratio?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing measuring the border box while reasoning from content-box numbers 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. Include one ordinary case, one boundary and one deliberate failure caused by measuring the border box while reasoning from content-box numbers. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For box-sizing changes the dimensions used by a specified ratio, separate the documented CSS aspect-ratio 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

Minimum and maximum sizes transfer through and apply according to sizing rules, so a constrained result may differ from the simple ratio calculation. 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 calling any non-ideal used ratio a browser bug without inspecting constraints. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Min and max constraints can alter the used dimensions, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Min and max constraints can alter the used dimensions chapter on CSS aspect-ratio, 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 calling any non-ideal used ratio a browser bug without inspecting constraints. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.card{width:300px;height:auto;aspect-ratio:3 / 2;max-height:160px}

Four purposeful transfer cases

Case 1: test laboratory. Contrast the rule using explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. 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: homework cards. Explain the rule using subject tiles keep a stable shape while labels remain readable. 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: reading journal. Transfer the rule using book-cover frames use a ratio without cropping rules being confused with sizing. 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 calling any non-ideal used ratio a browser bug without inspecting constraints.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Min and max constraints can alter the used dimensions, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from Min and max constraints can alter the used dimensions?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing calling any non-ideal used ratio a browser bug without inspecting constraints be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework cards with subject tiles keep a stable shape while labels remain readable. Include one ordinary case, one boundary and one deliberate failure caused by calling any non-ideal used ratio a browser bug without inspecting constraints. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Min and max constraints can alter the used dimensions, separate the documented CSS aspect-ratio 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 non-replaced ratio box can grow in the ratio-dependent axis to avoid unintentional content overflow under its automatic minimum. 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 aspect-ratio clips or overlaps long content by itself. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Content can impose an automatic minimum, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Content can impose an automatic minimum chapter on CSS aspect-ratio, 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 aspect-ratio clips or overlaps long content by itself. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.note{width:12rem;aspect-ratio:1 / 1}

Four purposeful transfer cases

Case 1: homework cards. Stress-test the rule using subject tiles keep a stable shape while labels remain readable. 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: reading journal. Explain the rule using book-cover frames use a ratio without cropping rules being confused with sizing. 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 gallery. Transfer the rule using image placeholders reserve space before files load. 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 video. Predict the rule using responsive embeds keep a widescreen frame. 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 aspect-ratio clips or overlaps long content by itself.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Content can impose an automatic minimum, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from Content can impose an automatic minimum?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming aspect-ratio clips or overlaps long content by itself be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny reading journal with book-cover frames use a ratio without cropping rules being confused with sizing. Include one ordinary case, one boundary and one deliberate failure caused by assuming aspect-ratio clips or overlaps long content by itself. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Content can impose an automatic minimum, separate the documented CSS aspect-ratio 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

Overriding the automatic minimum can preserve the ratio while allowing content to overflow unless another overflow policy handles it. 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 min-height:0 without choosing what excess content should do. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for min-height zero changes the content-pressure decision, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the min-height zero changes the content-pressure decision chapter on CSS aspect-ratio, 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 min-height:0 without choosing what excess content should do. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.note{width:12rem;aspect-ratio:1 / 1;min-height:0;overflow:auto}

Four purposeful transfer cases

Case 1: science gallery. Explain the rule using image placeholders reserve space before files load. 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 video. Transfer the rule using responsive embeds keep a widescreen frame. 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: family timetable. Predict the rule using grid cards remain coherent across narrow and wide screens. 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: library display. Contrast the rule using long titles expose automatic minimum and overflow decisions. 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 min-height:0 without choosing what excess content should do.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for min-height zero changes the content-pressure decision, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from min-height zero changes the content-pressure decision?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adding min-height:0 without choosing what excess content should do be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny science gallery with image placeholders reserve space before files load. Include one ordinary case, one boundary and one deliberate failure caused by adding min-height:0 without choosing what excess content should do. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For min-height zero changes the content-pressure decision, separate the documented CSS aspect-ratio 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 grid item’s preferred ratio interacts with track sizing, alignment, intrinsic contributions and automatic minimums. 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 assigning aspect-ratio and ignoring a stretched or content-sized track. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Grid track sizing remains part of the result, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Grid track sizing remains part of the result chapter on CSS aspect-ratio, 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 assigning aspect-ratio and ignoring a stretched or content-sized track. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}.item{aspect-ratio:1 / 1;overflow:auto}

Four purposeful transfer cases

Case 1: family timetable. Transfer the rule using grid cards remain coherent across narrow and wide screens. 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: library display. Predict the rule using long titles expose automatic minimum and overflow decisions. 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 explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. 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 assigning aspect-ratio and ignoring a stretched or content-sized track.
• 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 track sizing remains part of the result, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from Grid track sizing remains part of the result?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assigning aspect-ratio and ignoring a stretched or content-sized track be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA video with responsive embeds keep a widescreen frame. Include one ordinary case, one boundary and one deliberate failure caused by assigning aspect-ratio and ignoring a stretched or content-sized track. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Grid track sizing remains part of the result, separate the documented CSS aspect-ratio 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

Flex base sizes, min-size:auto, growth, shrinkage and cross-axis alignment can all affect a ratio item. 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 debugging only the ratio property when flex constraints control the axis. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Flex sizing can transfer through the ratio, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Flex sizing can transfer through the ratio chapter on CSS aspect-ratio, 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 debugging only the ratio property when flex constraints control the axis. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.row{display:flex}.preview{height:8rem;width:auto;aspect-ratio:4 / 3;min-width:0}

Four purposeful transfer cases

Case 1: test laboratory. Predict the rule using explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. 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: homework cards. Stress-test the rule using subject tiles keep a stable shape while labels remain readable. 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: reading journal. Explain the rule using book-cover frames use a ratio without cropping rules being confused with sizing. 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 debugging only the ratio property when flex constraints control the axis.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Flex sizing can transfer through the ratio, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from Flex sizing can transfer through the ratio?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing debugging only the ratio property when flex constraints control the axis be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny family timetable with grid cards remain coherent across narrow and wide screens. Include one ordinary case, one boundary and one deliberate failure caused by debugging only the ratio property when flex constraints control the axis. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Flex sizing can transfer through the ratio, separate the documented CSS aspect-ratio 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

aspect-ratio sizes the element’s box; object-fit chooses how replaced content is drawn inside that box. 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 cover or contain as though it created the box dimensions. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for object-fit controls media inside its content box, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the object-fit controls media inside its content box chapter on CSS aspect-ratio, 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 cover or contain as though it created the box dimensions. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

img{width:100%;aspect-ratio:1 / 1;object-fit:cover}

Four purposeful transfer cases

Case 1: homework cards. Contrast the rule using subject tiles keep a stable shape while labels remain readable. 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: reading journal. Stress-test the rule using book-cover frames use a ratio without cropping rules being confused with sizing. 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 gallery. Explain the rule using image placeholders reserve space before files load. 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 video. Transfer the rule using responsive embeds keep a widescreen frame. 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 cover or contain as though it created the box dimensions.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for object-fit controls media inside its content 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from object-fit controls media inside its content box?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using cover or contain as though it created the box dimensions be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library display with long titles expose automatic minimum and overflow decisions. Include one ordinary case, one boundary and one deliberate failure caused by using cover or contain as though it created the box dimensions. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For object-fit controls media inside its content box, separate the documented CSS aspect-ratio 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 full-width iframe or video can use aspect-ratio with auto height to preserve a stable responsive frame. 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 setting width and height both to fixed CSS values and expecting responsive ratio transfer. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Responsive embeds need one automatic axis, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Responsive embeds need one automatic axis chapter on CSS aspect-ratio, 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 setting width and height both to fixed CSS values and expecting responsive ratio transfer. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

iframe{display:block;width:100%;height:auto;aspect-ratio:16 / 9;border:0}

Four purposeful transfer cases

Case 1: science gallery. Stress-test the rule using image placeholders reserve space before files load. 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 video. Explain the rule using responsive embeds keep a widescreen frame. 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: family timetable. Transfer the rule using grid cards remain coherent across narrow and wide screens. 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: library display. Predict the rule using long titles expose automatic minimum and overflow decisions. 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 setting width and height both to fixed CSS values and expecting responsive ratio transfer.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State the contract for Responsive embeds need one automatic axis, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from Responsive embeds need one automatic axis?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing setting width and height both to fixed CSS values and expecting responsive ratio transfer 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 explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. Include one ordinary case, one boundary and one deliberate failure caused by setting width and height both to fixed CSS values and expecting responsive ratio transfer. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Responsive embeds need one automatic axis, separate the documented CSS aspect-ratio 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 a correct ratio or truthful width and height attributes lets layout reserve space before media content completes loading. 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 inventing a convenient ratio that changes when the real image arrives. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for A reserved ratio can reduce layout movement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the A reserved ratio can reduce layout movement chapter on CSS aspect-ratio, 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 inventing a convenient ratio that changes when the real image arrives. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

img{display:block;width:100%;height:auto;aspect-ratio:auto 3 / 2}

Four purposeful transfer cases

Case 1: family timetable. Explain the rule using grid cards remain coherent across narrow and wide screens. 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: library display. Transfer the rule using long titles expose automatic minimum and overflow decisions. 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 explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. 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 inventing a convenient ratio that changes when the real image arrives.
• 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 reserved ratio can reduce layout movement, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from A reserved ratio can reduce layout movement?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing inventing a convenient ratio that changes when the real image arrives 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. Include one ordinary case, one boundary and one deliberate failure caused by inventing a convenient ratio that changes when the real image arrives. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For A reserved ratio can reduce layout movement, separate the documented CSS aspect-ratio 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 aspect-ratio for responsive box shape, intrinsic dimensions for truthful media facts, object-fit for content fitting, and explicit sizes when both axes are genuinely fixed. 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 the property as decoration without checking content, accessibility and layout constraints. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Choose a preferred ratio when shape belongs to layout, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Choose a preferred ratio when shape belongs to layout chapter on CSS aspect-ratio, 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 the property as decoration without checking content, accessibility and layout constraints. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.lesson-demo{width:min(100%,40rem);height:auto;aspect-ratio:16 / 9}

Four purposeful transfer cases

Case 1: test laboratory. Transfer the rule using explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. 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: homework cards. Contrast the rule using subject tiles keep a stable shape while labels remain readable. 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: reading journal. Stress-test the rule using book-cover frames use a ratio without cropping rules being confused with sizing. 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 the property as decoration without checking content, accessibility and layout constraints.
• 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 a preferred ratio when shape belongs to layout, 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 aspect-ratio syntax. For this chapter, useful prompts are: “What did you expect from Choose a preferred ratio when shape belongs to layout?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using the property as decoration without checking content, accessibility and layout constraints be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework cards with subject tiles keep a stable shape while labels remain readable. Include one ordinary case, one boundary and one deliberate failure caused by using the property as decoration without checking content, accessibility and layout constraints. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Choose a preferred ratio when shape belongs to layout, separate the documented CSS aspect-ratio 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. homework cards: model, boundary and recovery

Create a small homework cards using subject tiles keep a stable shape while labels remain readable. Combine “aspect-ratio defines a preferred width-to-height ratio” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

2. reading journal: model, boundary and recovery

Create a small reading journal using book-cover frames use a ratio without cropping rules being confused with sizing. Combine “Two non-auto sizes leave no preferred-size role for the ratio” 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 gallery: model, boundary and recovery

Create a small science gallery using image placeholders reserve space before files load. Combine “auto is the initial value” 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 video: model, boundary and recovery

Create a small CCA video using responsive embeds keep a widescreen frame. Combine “auto plus a ratio can bridge replaced-element loading” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

5. family timetable: model, boundary and recovery

Create a small family timetable using grid cards remain coherent across narrow and wide screens. Combine “Content can impose an automatic minimum” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

6. library display: model, boundary and recovery

Create a small library display using long titles expose automatic minimum and overflow decisions. Combine “Flex sizing can transfer through the ratio” 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 explicit sizes, content pressure, replaced media, border-box and layout contexts expose boundaries. Combine “A reserved ratio can reduce layout movement” 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 aspect-ratio is compared with width-height pairs, intrinsic dimensions, object-fit and padding techniques. Combine “A known width can determine an automatic height” 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 aspect-ratio
• eduKatePunggol: How Studying Works

Return to contents