Fix: Clarified misleading statements in Grid Layout page (#39875) #39904
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
Content:CSS
estelle
reviewed
Jun 12, 2025
| @@ -316,7 +316,7 @@ When creating our example grid, we specifically defined our column tracks with t | |||
| The _explicit grid_ consists of rows and columns defined with {{cssxref("grid-template-columns")}} or {{cssxref("grid-template-rows")}}. The | |||
| _implicit grid_ extends the defined explicit grid when content is placed outside of that grid, such as into the rows by drawing additional grid lines. | |||
|
|
|||
| If you place something outside of the defined grid—or due to the amount of content, more grid tracks are needed—then the grid creates rows and columns in the _implicit grid_. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them. | |||
| If you place something outside of the defined grid—or due to the amount of content, more grid tracks are needed—then the grid creates rows and columns in the _implicit grid_. These tracks will be auto-sized by default, meaning their size is influenced both by the content inside them and by the available free space within the grid container. The "auto" keyword allows the track to accommodate content while also sharing any remaining space. | |||
There was a problem hiding this comment.
Need to be explicit about where the auto keyword is added (use backtick (`), not quotes (") for demarking keywords)
here is my suggestion for the rest:
Suggested change
| If you place something outside of the defined grid—or due to the amount of content, more grid tracks are needed—then the grid creates rows and columns in the _implicit grid_. These tracks will be auto-sized by default, meaning their size is influenced both by the content inside them and by the available free space within the grid container. The "auto" keyword allows the track to accommodate content while also sharing any remaining space. | |
| If you place something outside of the defined grid or, due to the amount of content, more grid tracks are needed, then the grid creates rows and columns in the _implicit grid_. These tracks will be auto-sized by default, meaning their size is influenced both by the content that is inside them and by the available free space within the grid container. |
There was a problem hiding this comment.
Hi @estelle 👋,
I have applied the suggested changes as per your feedback. Please have a look when convenient. Thank you! 🚀
…2106/content into fix-grid-statement-39875
estelle
reviewed
Jun 13, 2025
| @@ -316,7 +316,7 @@ When creating our example grid, we specifically defined our column tracks with t | |||
| The _explicit grid_ consists of rows and columns defined with {{cssxref("grid-template-columns")}} or {{cssxref("grid-template-rows")}}. The | |||
| _implicit grid_ extends the defined explicit grid when content is placed outside of that grid, such as into the rows by drawing additional grid lines. | |||
|
|
|||
| If you place something outside of the defined grid—or due to the amount of content, more grid tracks are needed—then the grid creates rows and columns in the _implicit grid_. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them. | |||
| If you place something outside of the defined grid or due to the amount of content, more grid tracks are needed, then the grid creates rows and columns in the _implicit grid_. These tracks will be auto-sized by default, meaning their size is influenced both by the content that is inside them and by the available free space within the grid container. The `auto` keyword allows the track to accommodate content while also sharing any remaining space. | |||
There was a problem hiding this comment.
Which property/ies is this auto referencing?
There was a problem hiding this comment.
In this context, the auto keyword refers to the track sizing function used in properties like grid-template-columns, grid-template-rows, grid-auto-columns, and grid-auto-rows. Specifically, when implicit grid tracks are created (for example, via grid-auto-rows), their default sizing is auto, meaning the track size depends on its content (similar to max-content) and can expand to fit the content within available space.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #39875
Summary of changes:
autoworks as the maximum value — it allows the track to grow based on content up to its max-content size while sharing free space within the grid container.These changes follow the suggestions from the issue reporter and improve the accuracy of documentation for CSS Grid behavior.
This is my first contribution to
mdn/content— happy to assist further if needed 🚀.