|
45 | 45 | list-style: none; |
46 | 46 | } |
47 | 47 | </style> |
48 | | -</head> |
49 | | -<body class=h-entry> |
50 | | -<style scoped> |
51 | | - #grid-property-breakdown tr:nth-child(3) td { |
52 | | - width: 25%; |
53 | | - border-style: solid; |
54 | | - } |
55 | | - </style> |
56 | | - |
57 | | -<style scoped type=text/css> |
| 48 | +<style type=text/css> |
58 | 49 | .example { |
59 | 50 | clear:both |
60 | 51 | } |
|
80 | 71 | } |
81 | 72 | </style> |
82 | 73 |
|
| 74 | +</head> |
| 75 | +<body class=h-entry> |
83 | 76 | <div class=head> |
84 | 77 | <p data-fill-with=logo><a class=logo href=http://www.w3.org/> |
85 | 78 | <img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72> |
86 | 79 | </a> |
87 | 80 | </p> |
88 | 81 | <h1 class="p-name no-ref" id=title>CSS Grid Layout Module Level 1</h1> |
89 | 82 | <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft, |
90 | | - <span class=dt-updated><span class=value-title title=20140124>24 January 2014</span></span></span></h2> |
| 83 | + <span class=dt-updated><span class=value-title title=20140205>5 February 2014</span></span></span></h2> |
91 | 84 | <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-grid/>http://dev.w3.org/csswg/css-grid/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-grid-1/>http://www.w3.org/TR/css-grid-1/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-grid/>http://dev.w3.org/csswg/css-grid/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/ rel=previous>http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/ rel=previous>http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/</a> |
92 | 85 | <dt>Feedback:</dt> |
93 | 86 | <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-grid%5D%20feedback">www-style@w3.org</a> |
@@ -693,7 +686,7 @@ <h3 class="heading settled heading" data-level=3.1 id=grid-containers><span clas |
693 | 686 | and the grid container’s margins do not collapse with the margins of its contents. |
694 | 687 | <a data-link-type=dfn href=#grid-container title="grid containers">Grid containers</a> form a containing block for their contents |
695 | 688 | <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> |
696 | | - The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow title=overflow>overflow</a> property applies to <a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a>. |
| 689 | + 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>. |
697 | 690 |
|
698 | 691 |
|
699 | 692 | <p> |
@@ -1186,7 +1179,7 @@ <h4 class="heading settled heading" data-level=5.1.4 id=subgrids><span class=sec |
1186 | 1179 | <li> |
1187 | 1180 | Layoutwise, the <a data-link-type=dfn href=#subgrid title=subgrid>subgrid</a>’s <a data-link-type=dfn href=#explicit-grid title="explicit grid">explicit grid</a> is always aligned with the corresponding section of the parent <a data-link-type=dfn href=#grid title=grid>grid</a>; |
1188 | 1181 | the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-content title=align-content>align-content</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-content title=justify-content>justify-content</a> properties on it are ignored. |
1189 | | - However, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow title=overflow>overflow</a> does apply, |
| 1182 | + However, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> does apply, |
1190 | 1183 | so the contents of the subgrid can be scrolled aside. |
1191 | 1184 | (Note: the act of scrolling does not affect layout.) |
1192 | 1185 |
|
@@ -1389,7 +1382,7 @@ <h4 class="heading settled heading" data-level=5.2.2 id=implicit-named-areas><sp |
1389 | 1382 | <h3 class="heading settled heading" data-level=5.3 id=explicit-grid-shorthand><span class=secno>5.3 </span><span class=content> |
1390 | 1383 | Explicit Grid Shorthand: the <a class=property data-link-type=propdesc href=#propdef-grid-template title=grid-template>grid-template</a> property</span><a class=self-link href=#explicit-grid-shorthand></a></h3> |
1391 | 1384 |
|
1392 | | -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template>grid-template<a class=self-link href=#propdef-grid-template></a></dfn><tr><th>Value:<td>none | subgrid | <a class=production data-link-type=propdesc href=#propdef-grid-template-columns title=grid-template-columns><‘grid-template-columns’></a> / <a class=production data-link-type=propdesc href=#propdef-grid-template-rows title=grid-template-rows><‘grid-template-rows’></a> |<br> [ <a class="production css-code" data-link-type=type href=#typedef-track-list title="<track-list>"><track-list></a> / ]? [ <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>"><line-names></a>? <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value title="<string>"><string></a> [ <a class="production css-code" data-link-type=type href=#typedef-track-size title="<track-size>"><track-size></a> <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>"><line-names></a> ]? ]+<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table> |
| 1385 | +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template>grid-template<a class=self-link href=#propdef-grid-template></a></dfn><tr><th>Value:<td>none | subgrid | <a class=production data-link-type=propdesc href=#propdef-grid-template-columns title=grid-template-columns><‘grid-template-columns’></a> / <a class=production data-link-type=propdesc href=#propdef-grid-template-rows title=grid-template-rows><‘grid-template-rows’></a> |<br> [ <a class="production css-code" data-link-type=type href=#typedef-track-list title="<track-list>"><track-list></a> / ]? [ <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>"><line-names></a>? <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value title="<string>"><string></a> <a class="production css-code" data-link-type=type href=#typedef-track-size title="<track-size>"><track-size></a>? <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>"><line-names></a>? ]+<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table> |
1393 | 1386 | <p> |
1394 | 1387 | The <a class=property data-link-type=propdesc href=#propdef-grid-template title=grid-template>grid-template</a> property is a shorthand for setting |
1395 | 1388 | <a class=property data-link-type=propdesc href=#propdef-grid-template-columns title=grid-template-columns>grid-template-columns</a>, <a class=property data-link-type=propdesc href=#propdef-grid-template-rows title=grid-template-rows>grid-template-rows</a>, and <a class=property data-link-type=propdesc href=#propdef-grid-template-areas title=grid-template-areas>grid-template-areas</a> in a single declaration. |
@@ -1807,7 +1800,7 @@ <h3 class="heading settled heading" data-level=6.3 id=grid-auto-position-propert |
1807 | 1800 | <h2 class="heading settled heading" data-level=7 id=grid-shorthand><span class=secno>7 </span><span class=content> |
1808 | 1801 | Grid Definition Shorthand: the <a class=property data-link-type=propdesc href=#propdef-grid title=grid>grid</a> property</span><a class=self-link href=#grid-shorthand></a></h2> |
1809 | 1802 |
|
1810 | | -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid>grid<a class=self-link href=#propdef-grid></a></dfn><tr><th>Value:<td><a class=production data-link-type=propdesc href=#propdef-grid-template title=grid-template><‘grid-template’></a> | <a class=production data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow><‘grid-auto-flow’></a> [ <a class=production data-link-type=propdesc href=#propdef-grid-auto-columns title=grid-auto-columns><‘grid-auto-columns’></a> [ / <a class=production data-link-type=propdesc href=#propdef-grid-auto-rows title=grid-auto-rows><‘grid-auto-rows’></a> ]? ]<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table> |
| 1803 | +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid>grid<a class=self-link href=#propdef-grid></a></dfn><tr><th>Value:<td><a class=production data-link-type=propdesc href=#propdef-grid-template title=grid-template><‘grid-template’></a> | [ <a class=production data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow><‘grid-auto-flow’></a> [ <a class=production data-link-type=propdesc href=#propdef-grid-auto-columns title=grid-auto-columns><‘grid-auto-columns’></a> [ / <a class=production data-link-type=propdesc href=#propdef-grid-auto-rows title=grid-auto-rows><‘grid-auto-rows’></a> ]? ]? ]<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table> |
1811 | 1804 | <p> |
1812 | 1805 | The <a class=property data-link-type=propdesc href=#propdef-grid title=grid>grid</a> property is a shorthand that sets |
1813 | 1806 | all of the explicit grid properties |
@@ -1920,7 +1913,14 @@ <h3 class="heading settled heading" data-level=8.1 id=common-uses><span class=se |
1920 | 1913 | <td><a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a> |
1921 | 1914 | </table> |
1922 | 1915 |
|
1923 | | - <h4 class="heading settled heading" data-level=8.1.1 id=common-uses-named-areas><span class=secno>8.1.1 </span><span class=content> |
| 1916 | + <style scoped> |
| 1917 | + #grid-property-breakdown tr:nth-child(3) td { |
| 1918 | + width: 25%; |
| 1919 | + border-style: solid; |
| 1920 | + } |
| 1921 | + </style> |
| 1922 | + |
| 1923 | +<h4 class="heading settled heading" data-level=8.1.1 id=common-uses-named-areas><span class=secno>8.1.1 </span><span class=content> |
1924 | 1924 | Named Areas</span><a class=self-link href=#common-uses-named-areas></a></h4> |
1925 | 1925 |
|
1926 | 1926 | <p> An item can be placed into a <a data-link-type=dfn href=#named-grid-area title="named grid area">named grid area</a> |
@@ -2510,7 +2510,7 @@ <h3 class="heading settled heading" data-level=9.6 id=grid-baselines><span class |
2510 | 2510 |
|
2511 | 2511 | <p> |
2512 | 2512 | When calculating the baseline according to the above rules, |
2513 | | - if the box contributing a baseline has an <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow title=overflow>overflow</a> value that allows scrolling, |
| 2513 | + if the box contributing a baseline has an <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> value that allows scrolling, |
2514 | 2514 | the box must be treated as being in its initial scroll position |
2515 | 2515 | for the purpose of determining its baseline. |
2516 | 2516 |
|
@@ -3300,12 +3300,12 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class= |
3300 | 3300 | <tr><th scope=row><a data-property="">grid-template-columns</a><td>none | <track-list> | subgrid <line-name-list>?<td>none<td>grid containers<td>no<td>see prose<td>visual<td>As specified, except for auto (see prose), with lengths made absolute |
3301 | 3301 | <tr><th scope=row><a data-property="">grid-template-rows</a><td>none | <track-list> | subgrid <line-name-list>?<td>none<td>grid containers<td>no<td>see prose<td>visual<td>As specified, except for auto (see prose), with lengths made absolute |
3302 | 3302 | <tr><th scope=row><a data-property="">grid-template-areas</a><td>none | <string>+<td>none<td>grid containers<td>no<td>n/a<td>visual<td>specified value |
3303 | | -<tr><th scope=row><a data-property="">grid-template</a><td>none | subgrid | <‘grid-template-columns’> / <‘grid-template-rows’> | [ <track-list> / ]? [ <line-names>? <string> [ <track-size> <line-names> ]? ]+<td>see individual properties<td>grid containers<td>see individual properties<td>see individual properties<td>visual<td>see individual properties |
| 3303 | +<tr><th scope=row><a data-property="">grid-template</a><td>none | subgrid | <‘grid-template-columns’> / <‘grid-template-rows’> | [ <track-list> / ]? [ <line-names>? <string> <track-size>? <line-names>? ]+<td>see individual properties<td>grid containers<td>see individual properties<td>see individual properties<td>visual<td>see individual properties |
3304 | 3304 | <tr><th scope=row><a data-property="">grid-auto-columns</a><td><track-size><td>auto<td>grid containers<td>no<td>see Track Sizing<td>visual<td>see Track Sizing |
3305 | 3305 | <tr><th scope=row><a data-property="">grid-auto-rows</a><td><track-size><td>auto<td>grid containers<td>no<td>see Track Sizing<td>visual<td>see Track Sizing |
3306 | 3306 | <tr><th scope=row><a data-property="">grid-auto-flow</a><td>none | [ [ row | column ] && dense? ]<td>none<td>grid containers<td>no<td>n/a<td>visual<td>specified value |
3307 | 3307 | <tr><th scope=row><a data-property="">grid-auto-position</a><td><grid-line> / <grid-line><td>1 / 1<td>grid containers<td>no<td>n/a<td>visual<td>specified value |
3308 | | -<tr><th scope=row><a data-property="">grid</a><td><‘grid-template’> | <‘grid-auto-flow’> [ <‘grid-auto-columns’> [ / <‘grid-auto-rows’> ]? ]<td>see individual properties<td>grid containers<td>see individual properties<td>see individual properties<td>visual<td>see individual properties |
| 3308 | +<tr><th scope=row><a data-property="">grid</a><td><‘grid-template’> | [ <‘grid-auto-flow’> [ <‘grid-auto-columns’> [ / <‘grid-auto-rows’> ]? ]? ]<td>see individual properties<td>grid containers<td>see individual properties<td>see individual properties<td>visual<td>see individual properties |
3309 | 3309 | <tr><th scope=row><a data-property="">grid-row-start</a><td><grid-line><td>auto<td>grid items<td>no<td>n/a<td>visual<td>specified value |
3310 | 3310 | <tr><th scope=row><a data-property="">grid-column-start</a><td><grid-line><td>auto<td>grid items<td>no<td>n/a<td>visual<td>specified value |
3311 | 3311 | <tr><th scope=row><a data-property="">grid-row-end</a><td><grid-line><td>auto<td>grid items<td>no<td>n/a<td>visual<td>specified value |
|
0 commit comments