Skip to content

Commit 247f2e0

Browse files
tabatkinstabatkins
committed
[css-grid] Move min-size-auto section to correct location, update link to point to it.
1 parent cd66711 commit 247f2e0

File tree

1 file changed

+96
-96
lines changed

1 file changed

+96
-96
lines changed

‎css-grid/Overview.bs‎

Lines changed: 96 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -626,101 +626,6 @@ Sizing Grid Containers</h3>
626626

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

629-
<!--
630-
██ ██ ████ ██ ██
631-
███ ███ ██ ███ ██ ██ ██
632-
████ ████ ██ ████ ██ ██ ██
633-
██ ███ ██ ██ ██ ██ ██ ███████ █████████
634-
██ ██ ██ ██ ████ ██ ██
635-
██ ██ ██ ██ ███ ██ ██
636-
██ ██ ████ ██ ██
637-
-->
638-
639-
<h3 id="min-size-auto">
640-
Implied Minimum Size of Grid Items</h3>
641-
642-
To provide a more reasonable default minimum size for <a>grid items</a>,
643-
this specification defines the effects of the 'min-width'/'min-height' ''min-width/auto'' value
644-
for <a>grid items</a>.
645-
646-
On a <a>grid item</a> whose 'overflow' is ''overflow/visible'',
647-
when ''min-width/auto'' is specified on the <a>grid item</a>,
648-
the following table gives the minimum size in that dimension:
649-
650-
<table class=data>
651-
<colgroup span=2></colgroup>
652-
<colgroup span=1></colgroup>
653-
<thead>
654-
<tr>
655-
<th>Specified Size
656-
<th>Transferred Size
657-
<th>Minimum Size
658-
<tbody>
659-
<tr>
660-
<td>
661-
<td>
662-
<td><var>content size</var>
663-
<tr>
664-
<td>✓
665-
<td>
666-
<td>min(<var>specified size</var>, <var>content size</var>)
667-
<tr>
668-
<td>
669-
<td>✓
670-
<td>min(<var>transferred size</var>, <var>content size</var>)
671-
<tr>
672-
<td>✓
673-
<td>✓
674-
<td>min(<var>specified size</var>, <var>content size</var>)
675-
</table>
676-
677-
Where:
678-
679-
<dl>
680-
<dt><var>specified size</var>
681-
<dd>
682-
If the item’s computed width/height is <a>definite</a>,
683-
then the <var>specified size</var> is that size
684-
(clamped by its <a>max size property</a> in that dimension if it's <a>definite</a>).
685-
It is otherwise undefined.
686-
687-
<dt><var>transferred size</var>
688-
<dd>
689-
If the item has an intrinsic aspect ratio
690-
and its computed height/width is <a>definite</a>,
691-
then the <var>transferred size</var> is that size
692-
(clamped by its <a lt="min size property">min and max size properties</a> in that dimension if they are <a>definite</a>),
693-
converted through the aspect ratio.
694-
It is otherwise undefined.
695-
696-
<dt><var>content size</var>
697-
<dd>
698-
The <var>content size</var> is the <a>min-content size</a> in that dimension,
699-
clamped, if it has an aspect ratio, by any <a>definite</a> <a lt="min size property">min and max size properties</a>
700-
in the perpendicular dimension
701-
converted through the aspect ratio,
702-
and then further clamped by the <a>max size property</a> in the relevant dimension if that is <a>definite</a>.
703-
</dl>
704-
705-
706-
<div class="note" id="min-size-opt">
707-
Note that while a content-based minimum size is often appropriate,
708-
and helps prevent content from overlapping or spilling outside its container,
709-
in some cases it is not:
710-
711-
In particular, if flex sizing is being used for a major content area of a document,
712-
it is better to set an explicit font-relative minimum width such as ''min-width: 12em''.
713-
A content-based minimum width could result in a large table or large image
714-
stretching the size of the entire content area into an overflow zone,
715-
and thereby making lines of text gratuitously long and hard to read.
716-
717-
Note also, when content-based sizing is used on an item with large amounts of content,
718-
the layout engine must traverse all of this content before finding its minimum size,
719-
whereas if the author sets an explicit minimum, this is not necessary.
720-
(For items with small amounts of content, however,
721-
this traversal is trivial and therefore not a performance concern.)
722-
</div>
723-
724629
<!--
725630
██████ ████████ ████ ████████ ████ ████████ ████████ ██ ██ ██████
726631
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ███ ██ ██
@@ -802,7 +707,7 @@ Grid Items</h2>
802707
The ''min-width/auto'' value of 'min-width' and 'min-height'
803708
behaves on <a>grid items</a> in the relevant axis
804709
analogously to its behavior on <a>flex items</a> in the <a>main axis</a>.
805-
See [[!CSS3-FLEXBOX]].
710+
See [[#min-size-auto]].
806711

807712
ISSUE: Review implications of intrinsic ratio and Grid's 2D nature.
808713

@@ -893,6 +798,101 @@ Z-axis Ordering: the 'z-index' property</h3>
893798
</pre>
894799
</div>
895800

801+
<!--
802+
██ ██ ████ ██ ██
803+
███ ███ ██ ███ ██ ██ ██
804+
████ ████ ██ ████ ██ ██ ██
805+
██ ███ ██ ██ ██ ██ ██ ███████ █████████
806+
██ ██ ██ ██ ████ ██ ██
807+
██ ██ ██ ██ ███ ██ ██
808+
██ ██ ████ ██ ██
809+
-->
810+
811+
<h3 id="min-size-auto">
812+
Implied Minimum Size of Grid Items</h3>
813+
814+
To provide a more reasonable default minimum size for <a>grid items</a>,
815+
this specification defines the effects of the 'min-width'/'min-height' ''min-width/auto'' value
816+
for <a>grid items</a>.
817+
818+
On a <a>grid item</a> whose 'overflow' is ''overflow/visible'',
819+
when ''min-width/auto'' is specified on the <a>grid item</a>,
820+
the following table gives the minimum size in that dimension:
821+
822+
<table class=data>
823+
<colgroup span=2></colgroup>
824+
<colgroup span=1></colgroup>
825+
<thead>
826+
<tr>
827+
<th>Specified Size
828+
<th>Transferred Size
829+
<th>Minimum Size
830+
<tbody>
831+
<tr>
832+
<td>
833+
<td>
834+
<td><var>content size</var>
835+
<tr>
836+
<td>✓
837+
<td>
838+
<td>min(<var>specified size</var>, <var>content size</var>)
839+
<tr>
840+
<td>
841+
<td>✓
842+
<td>min(<var>transferred size</var>, <var>content size</var>)
843+
<tr>
844+
<td>✓
845+
<td>✓
846+
<td>min(<var>specified size</var>, <var>content size</var>)
847+
</table>
848+
849+
Where:
850+
851+
<dl>
852+
<dt><var>specified size</var>
853+
<dd>
854+
If the item’s computed width/height is <a>definite</a>,
855+
then the <var>specified size</var> is that size
856+
(clamped by its <a>max size property</a> in that dimension if it's <a>definite</a>).
857+
It is otherwise undefined.
858+
859+
<dt><var>transferred size</var>
860+
<dd>
861+
If the item has an intrinsic aspect ratio
862+
and its computed height/width is <a>definite</a>,
863+
then the <var>transferred size</var> is that size
864+
(clamped by its <a lt="min size property">min and max size properties</a> in that dimension if they are <a>definite</a>),
865+
converted through the aspect ratio.
866+
It is otherwise undefined.
867+
868+
<dt><var>content size</var>
869+
<dd>
870+
The <var>content size</var> is the <a>min-content size</a> in that dimension,
871+
clamped, if it has an aspect ratio, by any <a>definite</a> <a lt="min size property">min and max size properties</a>
872+
in the perpendicular dimension
873+
converted through the aspect ratio,
874+
and then further clamped by the <a>max size property</a> in the relevant dimension if that is <a>definite</a>.
875+
</dl>
876+
877+
878+
<div class="note" id="min-size-opt">
879+
Note that while a content-based minimum size is often appropriate,
880+
and helps prevent content from overlapping or spilling outside its container,
881+
in some cases it is not:
882+
883+
In particular, if flex sizing is being used for a major content area of a document,
884+
it is better to set an explicit font-relative minimum width such as ''min-width: 12em''.
885+
A content-based minimum width could result in a large table or large image
886+
stretching the size of the entire content area into an overflow zone,
887+
and thereby making lines of text gratuitously long and hard to read.
888+
889+
Note also, when content-based sizing is used on an item with large amounts of content,
890+
the layout engine must traverse all of this content before finding its minimum size,
891+
whereas if the author sets an explicit minimum, this is not necessary.
892+
(For items with small amounts of content, however,
893+
this traversal is trivial and therefore not a performance concern.)
894+
</div>
895+
896896
<!--
897897
████████ ██ ██ ████████ ██ ████ ██████ ████ ████████
898898
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

0 commit comments

Comments
 (0)