Skip to content

Commit 4ad6773

Browse files
committed
[css-grid] Move Clamping section to be a subsection because it's ridiculous as a top-level section.
1 parent 0891bb9 commit 4ad6773

1 file changed

Lines changed: 48 additions & 48 deletions

File tree

css-grid/Overview.bs

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -759,6 +759,54 @@ Sizing Grid Containers</h3>
759759

760760
See [[!CSS3-SIZING]] for a definition of the terms in this section.
761761

762+
<!--
763+
██████ ██ ███ ██ ██ ████████ ████ ██ ██ ██████
764+
██ ██ ██ ██ ██ ███ ███ ██ ██ ██ ███ ██ ██ ██
765+
██ ██ ██ ██ ████ ████ ██ ██ ██ ████ ██ ██
766+
██ ██ ██ ██ ██ ███ ██ ████████ ██ ██ ██ ██ ██ ████
767+
██ ██ █████████ ██ ██ ██ ██ ██ ████ ██ ██
768+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██
769+
██████ ████████ ██ ██ ██ ██ ██ ████ ██ ██ ██████
770+
-->
771+
772+
<h3 id="overlarge-grids">
773+
Clamping Overlarge Grids</h3>
774+
775+
Since memory is not infinite,
776+
UAs may clamp the possible size of the <a>grid</a>
777+
to within a UA-defined limit,
778+
dropping all lines outside that limit.
779+
If a grid item is placed outside this limit,
780+
its grid area must be <a>clamped</a> to within this limited grid.
781+
782+
To <dfn local-lt=clamp>clamp a grid area</dfn>:
783+
* If the <a>grid area</a> would span outside the limited grid,
784+
its span is clamped to the last line of the limited <a>grid</a>.
785+
* If the <a>grid area</a> would be placed completely outside the limited grid
786+
its span must be truncated to 1
787+
and the area repositioned into the last <a>grid track</a> on that side of the grid.
788+
789+
<div class='example'>
790+
For example, if a UA only supported grids with at most 1000 tracks in each dimension,
791+
the following placement properties:
792+
793+
<pre class="lang-css">
794+
.grid-item {
795+
grid-row: 500 / 1500;
796+
grid-column: 2000 / 3000;
797+
}
798+
</pre>
799+
800+
Would end up being equivalent to:
801+
802+
<pre class="lang-css">
803+
.grid-item {
804+
grid-row: 500 / 1001;
805+
grid-column: 1000 / 1001;
806+
}
807+
</pre>
808+
</div>
809+
762810
<!--
763811
██████ ████████ ████ ████████ ████ ████████ ████████ ██ ██ ██████
764812
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ███ ██ ██
@@ -2310,54 +2358,6 @@ Grid Definition Shorthand: the 'grid' property</h2>
23102358
Issue: The auto-placed grid shorthand syntax isn't particularly useful.
23112359
An auto-placed grid needs an auto axis, but also an explicit axis.
23122360

2313-
<!--
2314-
██████ ██ ███ ██ ██ ████████ ████ ██ ██ ██████
2315-
██ ██ ██ ██ ██ ███ ███ ██ ██ ██ ███ ██ ██ ██
2316-
██ ██ ██ ██ ████ ████ ██ ██ ██ ████ ██ ██
2317-
██ ██ ██ ██ ██ ███ ██ ████████ ██ ██ ██ ██ ██ ████
2318-
██ ██ █████████ ██ ██ ██ ██ ██ ████ ██ ██
2319-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██
2320-
██████ ████████ ██ ██ ██ ██ ██ ████ ██ ██ ██████
2321-
-->
2322-
2323-
<h2 id="overlarge-grids">
2324-
Clamping Overlarge Grids</h2>
2325-
2326-
Since memory is not infinite,
2327-
UAs may clamp the possible size of the <a>grid</a>
2328-
to within a UA-defined limit,
2329-
dropping all lines outside that limit.
2330-
If a grid item is placed outside this limit,
2331-
its grid area must be <a>clamped</a> to within this limited grid.
2332-
2333-
To <dfn local-lt=clamp>clamp a grid area</dfn>:
2334-
* If the <a>grid area</a> would span outside the limited grid,
2335-
its span is clamped to the last line of the limited <a>grid</a>.
2336-
* If the <a>grid area</a> would be placed completely outside the limited grid
2337-
its span must be truncated to 1
2338-
and the area repositioned into the last <a>grid track</a> on that side of the grid.
2339-
2340-
<div class='example'>
2341-
For example, if a UA only supported grids with at most 1000 tracks in each dimension,
2342-
the following placement properties:
2343-
2344-
<pre class="lang-css">
2345-
.grid-item {
2346-
grid-row: 500 / 1500;
2347-
grid-column: 2000 / 3000;
2348-
}
2349-
</pre>
2350-
2351-
Would end up being equivalent to:
2352-
2353-
<pre class="lang-css">
2354-
.grid-item {
2355-
grid-row: 500 / 1001;
2356-
grid-column: 1000 / 1001;
2357-
}
2358-
</pre>
2359-
</div>
2360-
23612361
<!--
23622362
████████ ██ ███ ██████ ████ ██ ██ ██████
23632363
██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██

0 commit comments

Comments
 (0)