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
|
Preview URLs (comment last updated: 2025-06-23 02:28:34) |
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.
|
@estelle there's some comments from the author here if you could take a look! Thanks! |
estelle
reviewed
Jul 11, 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.
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 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. | |
| 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 implicit tracks will be auto-sized by default, meaning the size of the created rows or columns is influenced by both their content and by the available free space within the grid container. The `auto` keyword allows the generated tracks to accommodate content while also sharing any remaining space. |
is this what you meant? trying to clarify and ensure the reader understands
| @@ -366,7 +366,7 @@ In this example, we set `grid-auto-rows: 200px`, ensuring the tracks created in | |||
|
|
|||
| When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. For example, we may want our rows to never collapse smaller than 100 pixels, but if our content stretches to 300 pixels in height, then we would like the row to stretch to that height. This is solved by the {{cssxref("minmax", "minmax()")}} function. | |||
|
|
|||
| In this example, we use `minmax()` within the `grid-auto-rows` property value. By setting `grid-auto-rows: minmax(100px, auto);`, automatically created rows will be a minimum of `100px` tall, and have a maximum of `auto`. Setting `auto` as the maximum value means the size will stretch to fit the content, sizing the row based on the cell with the tallest content. | |||
| In this example, we use `minmax()` within the `grid-auto-rows` property value. By setting `grid-auto-rows: minmax(100px, auto);`, automatically created rows will be a minimum of `100px` tall, and have a maximum of `auto`. Setting auto as the maximum value allows the track to grow to accommodate its content (up to its max-content size) while also sharing any available free space within the grid container. | |||
There was a problem hiding this comment.
when using keywords, create <code> by encasing the code words in back ticks (`)
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 🚀.