Skip to content

[css-grid-3][masonry] Remove remaining align/justify-tracks references #9537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 30, 2023
Merged

[css-grid-3][masonry] Remove remaining align/justify-tracks references #9537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions css-grid-3/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -693,9 +693,6 @@ Performance Notes</h2>
Any intrinsic track sizing in the [=grid axis=] should be cheaper too,
because, typically, only a subset of items contribute to the intrinsic sizing in a masonry layout,
contrary to a 2-axis grid where all items spanning an intrinsically-sized track contribute.
That said, ''justify/align-tracks: stretch'' specifically
adds a cost proportionate to the number of items that are resized.
(Note that ''align-tracks/stretch'' isn't the default value for these properties though.)
Stretched items do a second layout with the new size (when it actually changed)
so this can be costly if there are a huge amount of stretched items
that each contains a lot of content.
Expand All @@ -707,11 +704,6 @@ Performance Notes</h2>
e.g. specifying ''justify/align-items:start''
and then opting in for just a few items with ''justify/align-self:stretch''
to let those items fill the [=masonry axis=].
Other 'justify-tracks' / 'align-tracks' values
such as ''align-self/center'', ''align-self/end'' and '<<content-distribution>>'
(other than ''align-self/stretch'')
shouldn't be a problem though
since they just reposition the items which is fast.
(This performance analysis is from a Gecko perspective,
but I suspect there's some truth to it for other layout engines as well.)

Expand Down
105 changes: 0 additions & 105 deletions css-grid-3/examples/align-tracks-example-1.html
View file
Open in desktop

This file was deleted.

59 changes: 0 additions & 59 deletions css-grid-3/examples/align-tracks-example-2.html
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion css-grid-3/examples/graceful-degradation-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
padding: 10px;
border: 3px solid;
background: lightgrey content-box;
align-tracks: stretch;
height: 150px;
transition: height 6s linear;
}
Expand Down
1 change: 0 additions & 1 deletion css-grid-3/examples/justify-tracks-example-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
padding: 10px;
border: 3px solid;
background: lightgrey content-box;
justify-tracks: stretch;
width: 150px;
transition: width 6s linear;
}
Expand Down
77 changes: 0 additions & 77 deletions css-grid-3/examples/masonry-axis-alignment-1.html
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions css-grid-3/examples/masonry-axis-baseline-alignment-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
.grid {
display: inline-grid;
grid: masonry / repeat(10,auto);
align-tracks: start, start, stretch, start, start, end, end, stretch, end, end;
gap: 3px 1px;
border: 2px solid;
height: 400px;
Expand All @@ -35,7 +34,6 @@
.medium { font-size:48pt; }
</style>
<body>
<pre>align-tracks: start, start, stretch, start, start, end, end, stretch, end, end</pre>

<div class="grid">
<item class="fb" style="padding-bottom: 5px"><div>F</div>x</item>
Expand Down