Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Brian Smith <[email protected]>
  • Loading branch information
estelle and bsmth authored Feb 7, 2025
1 parent fbb6e87 commit 875e5d8
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ page-type: guide

{{CSSRef}}

[CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/) contains rules that control what happens when you create a grid and do not place some or all of the child items. When you don't need explicit control over content placement, this "auto-placement" is the simplest way of creating a grid for a set of items.
[CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/) contains rules that control what happens when you create a grid and do not explicitly place some or all of the child items within the grid. When you don't need explicit control over content placement, this "auto-placement" is the simplest way of creating a grid for a set of items.

## Default placement

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -534,7 +534,7 @@ We can also apply the {{cssxref("content-distribution")}} space distribution val

{{ EmbedLiveSample('Setting_align-content_space-between', '500', '600') }}

If an item spans more than one grid track, using a space distribution value will likely cause items on your grid to become larger as the space that is added between the tracks gets added to the spanning item. Therefore, if you use these values, ensure the content of your tracks can cope with the extra space, or that you have used alignment properties on the items, to cause them to move to the start or end rather than stretch.
If an item spans more than one grid track, using a space distribution value will likely cause items on your grid to become larger because the space that's added between the tracks is added to the spanning item. Therefore, if you use these values, make sure the content of the tracks can cope with the extra space or that you have used alignment properties on the items, so they move to the start or end rather than stretch.

In the below image, we placed the grid with two different `align-content` values to compare `start` and `space-between`. You can see how the first two items, which span two row tracks, have taken on extra height in the `space-between` example as they gain the space that exists because of the of the free space that was distributed _between_ the three rows:

Expand Down

0 comments on commit 875e5d8

Please sign in to comment.