changeset
[css-grid] Rename Grid Layout Algorithm, move the intrinsic sizing section around.
Thu, 24 Apr 2014 11:45:59 -0700
- author
- Tab Atkins Jr. <jackalmage@gmail.com>
- date
- Thu, 24 Apr 2014 11:45:59 -0700
- changeset 13800
- fadb766ee5aa
- parent 13799
- 7204de7b18d9
- child 13801
- 2b424cb9accd
[css-grid] Rename Grid Layout Algorithm, move the intrinsic sizing section around.
| css-grid/Overview.bs | file | annotate | diff | comparison | revisions | |
| css-grid/Overview.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css-grid/Overview.bs Thu Apr 24 11:17:37 2014 -0700 1.2 +++ b/css-grid/Overview.bs Thu Apr 24 11:45:59 2014 -0700 1.3 @@ -511,10 +511,10 @@ 1.4 which in turn can affect the position or size of another <a>grid item</a>. 1.5 1.6 <h2 id="grid-model"> 1.7 -Grid Layout Box Model</h2> 1.8 +Grid Containers</h2> 1.9 1.10 <h3 id='grid-containers'> 1.11 -Grid Containers: the <a value>grid</a> and ''inline-grid'' 'display' values</h3> 1.12 +Establishing Grid Containers: the ''display/grid'' and ''inline-grid'' 'display' values</h3> 1.13 1.14 <pre class="propdef"> 1.15 Name: display 1.16 @@ -540,16 +540,6 @@ 1.17 <a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">exactly like block containers do</a>. [[!CSS21]] 1.18 The 'overflow' property applies to <a>grid containers</a>. 1.19 1.20 - A <i>grid container</i> is sized 1.21 - using the rules of the formatting context in which it participates. 1.22 - As a block-level box in a <a>block formatting context</a>, 1.23 - it is sized like any other block-level box that establishes a formatting context, 1.24 - and as an inline-level box in an inline formatting context 1.25 - it is sized as an atomic inline-level box (such as an inline-block). 1.26 - In both inline and block formatting contexts, 1.27 - the <i>grid container</i>’s ''auto'' block size is its max-content size. 1.28 - <span class="issue">The block layout spec should define this?</span> 1.29 - 1.30 Grid containers are not block containers, 1.31 and so some properties that were designed with the assumption of block layout 1.32 don't apply in the context of grid layout. 1.33 @@ -579,6 +569,30 @@ 1.34 with ''inline-grid'' in the "Specified Value" column 1.35 and <a>grid</a> in the "Computed Value" column. 1.36 1.37 +<h3 id='intrinsic-sizes'> 1.38 +Sizing Grid Containers</h3> 1.39 + 1.40 + A <i>grid container</i> is sized 1.41 + using the rules of the formatting context in which it participates. 1.42 + As a block-level box in a <a>block formatting context</a>, 1.43 + it is sized like any other block-level box that establishes a formatting context, 1.44 + with an ''auto'' inline size calculated as for in-flow block boxes. 1.45 + As an inline-level box in an inline formatting context, 1.46 + it is sized as an atomic inline-level box (such as an inline-block). 1.47 + In both inline and block formatting contexts, 1.48 + the <i>grid container</i>’s ''auto'' block size is its max-content size. 1.49 + <span class="issue">The block layout spec should define this?</span> 1.50 + 1.51 + The <a>max-content size</a> of a <a>grid container</a> is 1.52 + the sum of the <a>grid container’s</a> track sizes in the appropriate axis, 1.53 + when the grid is sized under a <a>max-content constraint</a>. 1.54 + 1.55 + The <a>min-content size</a> of a <a>grid container</a> is 1.56 + the sum of the <a>grid container’s</a> track sizes in the appropriate axis, 1.57 + when the grid is sized under a <a>min-content constraint</a>. 1.58 + 1.59 + See [[!CSS3-SIZING]] for a definition of the terms in this section. 1.60 + 1.61 1.62 1.63 <h2 id="grid-items"> 1.64 @@ -2338,7 +2352,7 @@ 1.65 Aligning with <a value for="margin">auto</a> margins</h3> 1.66 1.67 <em>This section is non-normative. 1.68 - The normative definition of how margins affect grid items is in the <a href="#layout-algorithm">Grid Layout Algorithm</a> section.</em> 1.69 + The normative definition of how margins affect grid items is in <a section href="#layout-algorithm"></a>.</em> 1.70 1.71 Auto margins on <a>grid items</a> have an effect very similar to auto margins in block flow: 1.72 1.73 @@ -2514,7 +2528,7 @@ 1.74 1.75 1.76 <h2 id='layout-algorithm'> 1.77 -Grid Layout Algorithm</h2> 1.78 +Track Sizing Algorithm</h2> 1.79 1.80 <h3 id='algo-terms'> 1.81 Definition of Terms for use in Calculating Grid Track Sizes</h3> 1.82 @@ -2863,19 +2877,6 @@ 1.83 This probably needs to be adjusted to handle sum(flex factors) approaches zero, 1.84 same as how Flexbox does it. 1.85 1.86 -<h3 id='intrinsic-sizes'> 1.87 -Intrinsic Sizes</h3> 1.88 - 1.89 - The <a>max-content size</a> of a <a>grid container</a> is 1.90 - the sum of the <a>grid container’s</a> track sizes in the appropriate axis, 1.91 - when the grid is sized under a <a>max-content constraint</a>. 1.92 - 1.93 - The <a>min-content size</a> of a <a>grid container</a> is 1.94 - the sum of the <a>grid container’s</a> track sizes in the appropriate axis, 1.95 - when the grid is sized under a <a>min-content constraint</a>. 1.96 - 1.97 - See [[!CSS3-SIZING]] for a definition of the terms in this section. 1.98 - 1.99 1.100 <h2 id='pagination'> 1.101 Fragmenting Grid Layout</h2>
2.1 --- a/css-grid/Overview.html Thu Apr 24 11:17:37 2014 -0700 2.2 +++ b/css-grid/Overview.html Thu Apr 24 11:45:59 2014 -0700 2.3 @@ -154,9 +154,10 @@ 2.4 <li><a href=#grid-track-concept><span class=secno>2.1</span> Grid Tracks and Cells</a> 2.5 <li><a href=#grid-line-concept><span class=secno>2.2</span> Grid Lines</a> 2.6 <li><a href=#grid-area-concept><span class=secno>2.3</span> Grid Areas</a></ul> 2.7 - <li><a href=#grid-model><span class=secno>3</span> Grid Layout Box Model</a> 2.8 + <li><a href=#grid-model><span class=secno>3</span> Grid Containers</a> 2.9 <ul class=toc> 2.10 - <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> 2.11 + <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> 2.12 + <li><a href=#intrinsic-sizes><span class=secno>3.2</span> Sizing Grid Containers</a></ul> 2.13 <li><a href=#grid-items><span class=secno>4</span> Grid Items</a> 2.14 <ul class=toc> 2.15 <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> 2.16 @@ -205,7 +206,7 @@ 2.17 <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> 2.18 <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> 2.19 <li><a href=#grid-baselines><span class=secno>9.6</span> Grid Baselines</a></ul> 2.20 - <li><a href=#layout-algorithm><span class=secno>10</span> Grid Layout Algorithm</a> 2.21 + <li><a href=#layout-algorithm><span class=secno>10</span> Track Sizing Algorithm</a> 2.22 <ul class=toc> 2.23 <li><a href=#algo-terms><span class=secno>10.1</span> Definition of Terms for use in Calculating Grid Track Sizes</a> 2.24 <li><a href=#algo-overview><span class=secno>10.2</span> Overall Sizing Algorithm</a> 2.25 @@ -214,8 +215,7 @@ 2.26 <li><a href=#algo-grow-tracks><span class=secno>10.5</span> Grow All Tracks To Their Max</a> 2.27 <li><a href=#algo-flex-tracks><span class=secno>10.6</span> Process Flexible Tracks</a> 2.28 <ul class=toc> 2.29 - <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> 2.30 - <li><a href=#intrinsic-sizes><span class=secno>10.7</span> Intrinsic Sizes</a></ul> 2.31 + <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> 2.32 <li><a href=#pagination><span class=secno>11</span> Fragmenting Grid Layout</a> 2.33 <li><a href=#acks><span class=secno></span> Acknowledgements</a> 2.34 <li><a href=#changes><span class=secno></span> Changes</a> 2.35 @@ -674,10 +674,10 @@ 2.36 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>. 2.37 2.38 <h2 class="heading settled heading" data-level=3 id=grid-model><span class=secno>3 </span><span class=content> 2.39 -Grid Layout Box Model</span><a class=self-link href=#grid-model></a></h2> 2.40 +Grid Containers</span><a class=self-link href=#grid-model></a></h2> 2.41 2.42 <h3 class="heading settled heading" data-level=3.1 id=grid-containers><span class=secno>3.1 </span><span class=content> 2.43 -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> 2.44 +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> 2.45 2.46 <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> 2.47 <dl data-dfn-for=display data-dfn-type=value> 2.48 @@ -699,16 +699,6 @@ 2.49 <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> 2.50 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>. 2.51 2.52 -<p> A <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> is sized 2.53 - using the rules of the formatting context in which it participates. 2.54 - As a block-level box in a <a data-link-type=dfn title="block formatting context">block formatting context</a>, 2.55 - it is sized like any other block-level box that establishes a formatting context, 2.56 - and as an inline-level box in an inline formatting context 2.57 - it is sized as an atomic inline-level box (such as an inline-block). 2.58 - In both inline and block formatting contexts, 2.59 - 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. 2.60 - <span class=issue id=issue-839d056f><a class=self-link href=#issue-839d056f></a>The block layout spec should define this?</span> 2.61 - 2.62 <p> Grid containers are not block containers, 2.63 and so some properties that were designed with the assumption of block layout 2.64 don’t apply in the context of grid layout. 2.65 @@ -738,6 +728,30 @@ 2.66 with <a class=css data-link-type=maybe href=#valuedef-inline-grid title=inline-grid>inline-grid</a> in the "Specified Value" column 2.67 and <a data-link-type=dfn href=#grid title=grid>grid</a> in the "Computed Value" column. 2.68 2.69 +<h3 class="heading settled heading" data-level=3.2 id=intrinsic-sizes><span class=secno>3.2 </span><span class=content> 2.70 +Sizing Grid Containers</span><a class=self-link href=#intrinsic-sizes></a></h3> 2.71 + 2.72 +<p> A <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> is sized 2.73 + using the rules of the formatting context in which it participates. 2.74 + As a block-level box in a <a data-link-type=dfn title="block formatting context">block formatting context</a>, 2.75 + it is sized like any other block-level box that establishes a formatting context, 2.76 + 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. 2.77 + As an inline-level box in an inline formatting context, 2.78 + it is sized as an atomic inline-level box (such as an inline-block). 2.79 + In both inline and block formatting contexts, 2.80 + 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. 2.81 + <span class=issue id=issue-839d056f><a class=self-link href=#issue-839d056f></a>The block layout spec should define this?</span> 2.82 + 2.83 +<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 2.84 + 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, 2.85 + 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>. 2.86 + 2.87 +<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 2.88 + 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, 2.89 + 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>. 2.90 + 2.91 +<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. 2.92 + 2.93 2.94 2.95 <h2 class="heading settled heading" data-level=4 id=grid-items><span class=secno>4 </span><span class=content> 2.96 @@ -2318,7 +2332,8 @@ 2.97 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> 2.98 2.99 <p> <em>This section is non-normative. 2.100 - The normative definition of how margins affect grid items is in the <a href=#layout-algorithm>Grid Layout Algorithm</a> section.</em> 2.101 + The normative definition of how margins affect grid items is in <a data-section="" href=#layout-algorithm>§10 2.102 +Track Sizing Algorithm</a>.</em> 2.103 2.104 <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: 2.105 2.106 @@ -2490,7 +2505,7 @@ 2.107 2.108 2.109 <h2 class="heading settled heading" data-level=10 id=layout-algorithm><span class=secno>10 </span><span class=content> 2.110 -Grid Layout Algorithm</span><a class=self-link href=#layout-algorithm></a></h2> 2.111 +Track Sizing Algorithm</span><a class=self-link href=#layout-algorithm></a></h2> 2.112 2.113 <h3 class="heading settled heading" data-level=10.1 id=algo-terms><span class=secno>10.1 </span><span class=content> 2.114 Definition of Terms for use in Calculating Grid Track Sizes</span><a class=self-link href=#algo-terms></a></h3> 2.115 @@ -2838,19 +2853,6 @@ 2.116 This probably needs to be adjusted to handle sum(flex factors) approaches zero, 2.117 same as how Flexbox does it. 2.118 2.119 -<h3 class="heading settled heading" data-level=10.7 id=intrinsic-sizes><span class=secno>10.7 </span><span class=content> 2.120 -Intrinsic Sizes</span><a class=self-link href=#intrinsic-sizes></a></h3> 2.121 - 2.122 -<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 2.123 - 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, 2.124 - 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>. 2.125 - 2.126 -<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 2.127 - 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, 2.128 - 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>. 2.129 - 2.130 -<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. 2.131 - 2.132 2.133 <h2 class="heading settled heading" data-level=11 id=pagination><span class=secno>11 </span><span class=content> 2.134 Fragmenting Grid Layout</span><a class=self-link href=#pagination></a></h2> 2.135 @@ -3375,6 +3377,7 @@ 2.136 This probably needs to be adjusted to handle sum(flex factors) approaches zero, 2.137 same as how Flexbox does it. 2.138 2.139 + 2.140 <a href=#issue-55d6dc75> ↵ </a></div><div class=issue> 2.141 Fill this in. 2.142
