E84C [css-grid] Rename Grid Layout Algorithm, move the intrinsic sizing se… · w3c/csswg-drafts@189574a · GitHub
Skip to content

Commit 189574a

Browse files
tabatkinstabatkins
committed
[css-grid] Rename Grid Layout Algorithm, move the intrinsic sizing section around.
1 parent e3e0c05 commit 189574a

2 files changed

Lines changed: 63 additions & 59 deletions

File tree

‎css-grid/Overview.bs‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -511,10 +511,10 @@ Grid Areas</h3>
511511
which in turn can affect the position or size of another <a>grid item</a>.
512512

513513
<h2 id="grid-model">
514-
Grid Layout Box Model</h2>
514+
Grid Containers</h2>
515515

516516
<h3 id='grid-containers'>
517-
Grid Containers: the <a value>grid</a> and ''inline-grid'' 'display' values</h3>
517+
Establishing Grid Containers: the ''display/grid'' and ''inline-grid'' 'display' values</h3>
518518

519519
<pre class="propdef">
520520
Name: display
@@ -540,16 +540,6 @@ Grid Containers: the <a value>grid</a> and ''inline-grid'' 'display' values</h3>
540540
<a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">exactly like block containers do</a>. [[!CSS21]]
541541
The 'overflow' property applies to <a>grid containers</a>.
542542

543-
A <i>grid container</i> is sized
544-
using the rules of the formatting context in which it participates.
545-
As a block-level box in a <a>block formatting context</a>,
546-
it is sized like any other block-level box that establishes a formatting context,
547-
and as an inline-level box in an inline formatting context
548-
it is sized as an atomic inline-level box (such as an inline-block).
549-
In both inline and block formatting contexts,
550-
the <i>grid container</i>’s ''auto'' block size is its max-content size.
551-
<span class="issue">The block layout spec should define this?</span>
552-
553543
Grid containers are not block containers,
554544
and so some properties that were designed with the assumption of block layout
555545
don't apply in the context of grid layout.
@@ -579,6 +569,30 @@ Grid Containers: the <a value>grid</a> and ''inline-grid'' 'display' values</h3>
579569
with ''inline-grid'' in the "Specified Value" column
580570
and <a>grid</a> in the "Computed Value" column.
581571

572+
<h3 id='intrinsic-sizes'>
573+
Sizing Grid Containers</h3>
574+
575+
A <i>grid container</i> is sized
576+
using the rules of the formatting context in which it participates.
577+
As a block-level box in a <a>block formatting context</a>,
578+
it is sized like any other block-level box that establishes a formatting context,
579+
with an ''auto'' inline size calculated as for in-flow block boxes.
580+
As an inline-level box in an inline formatting context,
581+
it is sized as an atomic inline-level box (such as an inline-block).
582+
In both inline and block formatting contexts,
583+
the <i>grid container</i>’s ''auto'' block size is its max-content size.
584+
<span class="issue">The block layout spec should define this?</span>
585+
586+
The <a>max-content size</a> of a <a>grid container</a> is
587+
the sum of the <a>grid container’s</a> track sizes in the appropriate axis,
588+
when the grid is sized under a <a>max-content constraint</a>.
589+
590+
The <a>min-content size</a> of a <a>grid container</a> is
591+
the sum of the <a>grid container’s</a> track sizes in the appropriate axis,
592+
when the grid is sized under a <a>min-content constraint</a>.
593+
594+
See [[!CSS3-SIZING]] for a definition of the terms in this section.
595+
582596

583597

584598
<h2 id="grid-items">
@@ -2338,7 +2352,7 @@ Alignment</h2>
23382352
Aligning with <a value for="margin">auto</a> margins</h3>
23392353

23402354
<em>This section is non-normative.
2341-
The normative definition of how margins affect grid items is in the <a href="#layout-algorithm">Grid Layout Algorithm</a> section.</em>
2355+
The normative definition of how margins affect grid items is in <a section href="#layout-algorithm"></a>.</em>
23422356

23432357
Auto margins on <a>grid items</a> have an effect very similar to auto margins in block flow:
23442358

@@ -2514,7 +2528,7 @@ Grid Baselines</h3>
25142528

25152529

25162530
<h2 id='layout-algorithm'>
2517-
Grid Layout Algorithm</h2>
2531+
Track Sizing Algorithm</h2>
25182532

25192533
<h3 id='algo-terms'>
25202534
Definition of Terms for use in Calculating Grid Track Sizes</h3>
@@ -2863,19 +2877,6 @@ Find the Size of an ''fr''</h4>
28632877
This probably needs to be adjusted to handle sum(flex factors) approaches zero,
28642878
same as how Flexbox does it.
28652879

2866-
<h3 id='intrinsic-sizes'>
2867-
Intrinsic Sizes</h3>
2868-
2869-
The <a>max-content size</a> of a <a>grid container</a> is
2870-
the sum of the <a>grid container’s</a> track sizes in the appropriate axis,
2871-
when the grid is sized under a <a>max-content constraint</a>.
2872-
2873-
The <a>min-content size</a> of a <a>grid container</a> is
2874-
the sum of the <a>grid container’s</a> track sizes in the appropriate axis,
2875-
when the grid is sized under a <a>min-content constraint</a>.
2876-
2877-
See [[!CSS3-SIZING]] for a definition of the terms in this section.
2878-
28792880

28802881
<h2 id='pagination'>
28812882
Fragmenting Grid Layout</h2>

‎css-grid/Overview.html‎

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -154,9 +154,10 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
154154
<li><a href=#grid-track-concept><span class=secno>2.1</span> Grid Tracks and Cells</a>
155155
<li><a href=#grid-line-concept><span class=secno>2.2</span> Grid Lines</a>
156156
<li><a href=#grid-area-concept><span class=secno>2.3</span> Grid Areas</a></ul>
157-
<li><a href=#grid-model><span class=secno>3</span> Grid Layout Box Model</a>
157+
<li><a href=#grid-model><span class=secno>3</span> Grid Containers</a>
158158
<ul class=toc>
159-
<li><a href=#grid-containers><span class=secno>3.1</span> Grid Containers: the <span data-link-type=value title=grid>grid</span> and <span class=css data-link-type=maybe title=inline-grid>inline-grid</span> <span class=property data-link-type=propdesc title=display>display</span> values</a></ul>
159+
<li><a href=#grid-containers><span class=secno>3.1</span> Establishing Grid Containers: the <span class=css data-link-for=display data-link-type=maybe title=grid>grid</span> and <span class=css data-link-type=maybe title=inline-grid>inline-grid</span> <span class=property data-link-type=propdesc title=display>display</span> values</a>
160+
<li><a href=#intrinsic-sizes><span class=secno>3.2</span> Sizing Grid Containers</a></ul>
160161
<li><a href=#grid-items><span class=secno>4</span> Grid Items</a>
161162
<ul class=toc>
162163
<li><a href=#visibility-collapse><span class=secno>4.1</span> Collapsed Grid Items: the <span class=property data-link-type=propdesc title=visibility>visibility</span> property</a>
@@ -205,7 +206,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
205206
<li><a href=#grid-align><span class=secno>9.4</span> Aligning the Grid: the <span class=property data-link-type=propdesc title=justify-content>justify-content</span> and <span class=property data-link-type=propdesc title=align-content>align-content</span> properties</a>
206207
<li><a href=#z-order><span class=secno>9.5</span> Z-axis Ordering: the <span class=property data-link-type=propdesc title=z-index>z-index</span> property</a>
207208
<li><a href=#grid-baselines><span class=secno>9.6</span> Grid Baselines</a></ul>
208-
<li><a href=#layout-algorithm><span class=secno>10</span> Grid Layout Algorithm</a>
209+
<li><a href=#layout-algorithm><span class=secno>10</span> Track Sizing Algorithm</a>
209210
<ul class=toc>
210211
<li><a href=#algo-terms><span class=secno>10.1</span> Definition of Terms for use in Calculating Grid Track Sizes</a>
211212
<li><a href=#algo-overview><span class=secno>10.2</span> Overall Sizing Algorithm</a>
@@ -214,8 +215,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
214215
<li><a href=#algo-grow-tracks><span class=secno>10.5</span> Grow All Tracks To Their Max</a>
215216
<li><a href=#algo-flex-tracks><span class=secno>10.6</span> Process Flexible Tracks</a>
216217
<ul class=toc>
217-
<li><a href=#algo-find-fr-size><span class=secno>10.6.1</span> Find the Size of an <span class=css data-link-type=maybe title=fr>fr</span></a></ul>
218-
<li><a href=#intrinsic-sizes><span class=secno>10.7</span> Intrinsic Sizes</a></ul>
218+
<li><a href=#algo-find-fr-size><span class=secno>10.6.1</span> Find the Size of an <span class=css data-link-type=maybe title=fr>fr</span></a></ul></ul>
219219
<li><a href=#pagination><span class=secno>11</span> Fragmenting Grid Layout</a>
220220
<li><a href=#acks><span class=secno></span> Acknowledgements</a>
221221
<li><a href=#changes><span class=secno></span> Changes</a>
@@ -674,10 +674,10 @@ <h3 class="heading settled heading" data-level=2.3 id=grid-area-concept><span cl
674674
which in turn can affect the position or size of another <a data-link-type=dfn href=#grid-item title="grid item">grid item</a>.
675675

676676
<h2 class="heading settled heading" data-level=3 id=grid-model><span class=secno>3 </span><span class=content>
677-
Grid Layout Box Model</span><a class=self-link href=#grid-model></a></h2>
677+
Grid Containers</span><a class=self-link href=#grid-model></a></h2>
678678

679679
<h3 class="heading settled heading" data-level=3.1 id=grid-containers><span class=secno>3.1 </span><span class=content>
680-
Grid Containers: the <a class=css-code data-link-type=value href=#valuedef-grid title=grid>grid</a> and <a class=css data-link-type=maybe href=#valuedef-inline-grid title=inline-grid>inline-grid</a> <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> values</span><a class=self-link href=#grid-containers></a></h3>
680+
Establishing Grid Containers: the <a class=css data-link-for=display data-link-type=maybe href=#valuedef-grid title=grid>grid</a> and <a class=css data-link-type=maybe href=#valuedef-inline-grid title=inline-grid>inline-grid</a> <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> values</span><a class=self-link href=#grid-containers></a></h3>
681681

682682
<table class="definition propdef partial"><tr><th>Name:<td><a class=css-code data-link-type=property href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a><tr><th>New values:<td>grid | inline-grid</table>
683683
<dl data-dfn-for=display data-dfn-type=value>
@@ -699,16 +699,6 @@ <h3 class="heading settled heading" data-level=3.1 id=grid-containers><span clas
699699
<a href=http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>exactly like block containers do</a>. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>
700700
The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> property applies to <a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a>.
701701

702-
<p> A <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> is sized
703-
using the rules of the formatting context in which it participates.
704-
As a block-level box in a <a data-link-type=dfn title="block formatting context">block formatting context</a>,
705-
it is sized like any other block-level box that establishes a formatting context,
706-
and as an inline-level box in an inline formatting context
707-
it is sized as an atomic inline-level box (such as an inline-block).
708-
In both inline and block formatting contexts,
709-
the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>’s <a class=css data-link-type=maybe href=#valuedef-auto title=auto>auto</a> block size is its max-content size.
710-
<span class=issue id=issue-839d056f><a class=self-link href=#issue-839d056f></a>The block layout spec should define this?</span>
711-
712702
<p> Grid containers are not block containers,
713703
and so some properties that were designed with the assumption of block layout
714704
don’t apply in the context of grid layout.
@@ -738,6 +728,30 @@ <h3 class="heading settled heading" data-level=3.1 id=grid-containers><span clas
738728
with <a class=css data-link-type=maybe href=#valuedef-inline-grid title=inline-grid>inline-grid</a> in the "Specified Value" column
739729
and <a data-link-type=dfn href=#grid title=grid>grid</a> in the "Computed Value" column.
740730

731+
<h3 class="heading settled heading" data-level=3.2 id=intrinsic-sizes><span class=secno>3.2 </span><span class=content>
732+
Sizing Grid Containers</span><a class=self-link href=#intrinsic-sizes></a></h3>
733+
734+
<p> A <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> is sized
735+
using the rules of the formatting context in which it participates.
736+
As a block-level box in a <a data-link-type=dfn title="block formatting context">block formatting context</a>,
737+
it is sized like any other block-level box that establishes a formatting context,
738+
with an <a class=css data-link-type=maybe href=#valuedef-auto title=auto>auto</a> inline size calculated as for in-flow block boxes.
739+
As an inline-level box in an inline formatting context,
740+
it is sized as an atomic inline-level box (such as an inline-block).
741+
In both inline and block formatting contexts,
742+
the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>’s <a class=css data-link-type=maybe href=#valuedef-auto title=auto>auto</a> block size is its max-content size.
743+
<span class=issue id=issue-839d056f><a class=self-link href=#issue-839d056f></a>The block layout spec should define this?</span>
744+
745+
<p> The <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-measure title="max-content size">max-content size</a> of a <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> is
746+
the sum of the <a data-link-type=dfn href=#grid-container title="grid container’s">grid container’s</a> track sizes in the appropriate axis,
747+
when the grid is sized under a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/ 8C51 #max-content-constraint title="max-content constraint">max-content constraint</a>.
748+
749+
<p> The <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-measure title="min-content size">min-content size</a> of a <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> is
750+
the sum of the <a data-link-type=dfn href=#grid-container title="grid container’s">grid container’s</a> track sizes in the appropriate axis,
751+
when the grid is sized under a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-constraint title="min-content constraint">min-content constraint</a>.
752+
753+
<p> See <a data-biblio-type=normative data-link-type=biblio href=#css3-sizing title=css3-sizing>[CSS3-SIZING]</a> for a definition of the terms in this section.
754+
741755

742756

743757
<h2 class="heading settled heading" data-level=4 id=grid-items><span class=secno>4 </span><span class=content>
@@ -2318,7 +2332,8 @@ <h3 class="heading settled heading" data-level=9.1 id=auto-margins><span class=s
23182332
Aligning with <a class=css-code data-link-for=margin data-link-type=value title=auto>auto</a> margins</span><a class=self-link href=#auto-margins></a></h3>
23192333

23202334
<p> <em>This section is non-normative.
2321-
The normative definition of how margins affect grid items is in the <a href=#layout-algorithm>Grid Layout Algorithm</a> section.</em>
2335+
The normative definition of how margins affect grid items is in <a data-section="" href=#layout-algorithm>§10
2336+
Track Sizing Algorithm</a>.</em>
23222337

23232338
<p> Auto margins on <a data-link-type=dfn href=#grid-item title="grid items">grid items</a> have an effect very similar to auto margins in block flow:
23242339

@@ -2490,7 +2505,7 @@ <h3 class="heading settled heading" data-level=9.6 id=grid-baselines><span class
24902505

24912506

24922507
<h2 class="heading settled heading" data-level=10 id=layout-algorithm><span class=secno>10 </span><span class=content>
2493-
Grid Layout Algorithm</span><a class=self-link href=#layout-algorithm></a></h2>
2508+
Track Sizing Algorithm</span><a class=self-link href=#layout-algorithm></a></h2>
24942509

24952510
<h3 class="heading settled heading" data-level=10.1 id=algo-terms><span class=secno>10.1 </span><span class=content>
24962511
Definition of Terms for use in Calculating Grid Track Sizes</span><a class=self-link href=#algo-terms></a></h3>
@@ -2838,19 +2853,6 @@ <h4 class="heading settled heading" data-level=10.6.1 id=algo-find-fr-size><span
28382853
This probably needs to be adjusted to handle sum(flex factors) approaches zero,
28392854
same as how Flexbox does it.
28402855

2841-
<h3 class="heading settled heading" data-level=10.7 id=intrinsic-sizes><span class=secno>10.7 </span><span class=content>
2842-
Intrinsic Sizes</span><a class=self-link href=#intrinsic-sizes></a></h3>
2843-
2844-
<p> The <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-measure title="max-content size">max-content size</a> of a <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> is
2845-
the sum of the <a data-link-type=dfn href=#grid-container title="grid container’s">grid container’s</a> track sizes in the appropriate axis,
2846-
when the grid is sized under a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-constraint title="max-content constraint">max-content constraint</a>.
2847-
2848-
<p> The <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-measure title="min-content size">min-content size</a> of a <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> is
2849-
the sum of the <a data-link-type=dfn href=#grid-container title="grid container’s">grid container’s</a> track sizes in the appropriate axis,
2850-
when the grid is sized under a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-constraint title="min-content constraint">min-content constraint</a>.
2851-
2852-
<p> See <a data-biblio-type=normative data-link-type=biblio href=#css3-sizing title=css3-sizing>[CSS3-SIZING]</a> for a definition of the terms in this section.
2853-
28542856

28552857
<h2 class="heading settled heading" data-level=11 id=pagination><span class=secno>11 </span><span class=content>
28562858
Fragmenting Grid Layout</span><a class=self-link href=#pagination></a></h2>
@@ -3375,6 +3377,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
33753377
This probably needs to be adjusted to handle sum(flex factors) approaches zero,
33763378
same as how Flexbox does it.
33773379

3380+
33783381
<a href=#issue-55d6dc75> ↵ </a></div><div class=issue>
33793382
Fill this in.
33803383

0 commit comments

Comments
 (0)