Clarify grid-auto-flow column placement tracks

[KirtiRamchandani]

Summary

• clarify how the grid-auto-flow: column example uses row tracks before adding columns
• point readers to grid-auto-columns for sizing implicit columns

Rationale

The issue report describes confusion when only column tracks are defined: column auto-placement creates additional implicit columns instead of wrapping items into the existing explicit columns. The note explains why the example defines rows and how implicit columns are sized.

Tests

• git diff --check
• npx --yes prettier@3.8.3 --check files/en-us/web/css/reference/properties/grid-auto-flow/index.md
• npx --yes --package markdownlint-cli2@0.22.1 --package markdownlint-rule-search-replace@1.2.0 markdownlint-cli2 --config .markdownlint-cli2.jsonc files/en-us/web/css/reference/properties/grid-auto-flow/index.md

Fixes #44282

[pepelsbey]

Looks good! Thank you 🙂

Though explanation usually goes before the rendered example.

[pepelsbey]

Suggested change

	{{EmbedLiveSample("Setting_grid_auto-placement", "200px", "260px")}}
	In this example, `grid-template` defines four row tracks and two column tracks.
	When `grid-auto-flow` is set to `column`, auto-placed items fill each column by filling the rows in turn, then add new columns as needed.
	If your grid defines only column tracks, `column` auto-placement creates additional implicit columns instead of wrapping items into the existing columns, and those implicit columns are sized by [`grid-auto-columns`](/en-US/docs/Web/CSS/Reference/Properties/grid-auto-columns).
	In this example, `grid-template` defines four row tracks and two column tracks.
	When `grid-auto-flow` is set to `column`, auto-placed items fill each column top-to-bottom, then add new columns as needed.
	If your grid defines only column tracks, `column` auto-placement creates additional implicit columns instead of wrapping items into the existing columns, and those implicit columns are sized by {{cssxref("grid-auto-columns")}}.
	{{EmbedLiveSample("Setting_grid_auto-placement", "200px", "260px")}}

[pepelsbey]

@SkepticaLee does it fix the issue?

[github-actions]

Preview URLs (1 page)

• /en-US/docs/Web/CSS/Reference/Properties/grid-auto-flow