Skip to content

Commit ae217ca

Browse files
alexmog1alexmog1
committed
*** empty log message ***
1 parent 0e7a814 commit ae217ca

1 file changed

Lines changed: 16 additions & 10 deletions

File tree

‎css3-grid-align/Overview.html‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,14 @@
1616

1717
<link href="../default.css" rel="stylesheet" type="text/css">
1818
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel="Stylesheet" type="text/css">
19-
19+
<style type="text/css">
20+
.example { clear:both; }
21+
</style>
2022
</head>
2123
<body><div class="head"><p><a href="http://www.w3.org/"><img src="http://www.w3.org/Icons/w3c_home" alt="W3C" width="72" height="48"></a></p><h1 class="title" id="title">CSS Grid Alignment Level 3</h1><h2 id="w3c-editor-s-draft-2-november-2010">W3C Editor's Draft 2 November 2010</h2><dl><dt>This version:</dt><dd><a href="http://dev.w3.org/2009/dap/ReSpec.js/documentation.html">http://dev.w3.org/2009/dap/ReSpec.js/documentation.html</a></dd><dt>Latest published version:</dt><dd><a href="http://www.w3.org/TR/xxx-xxx/">http://www.w3.org/TR/xxx-xxx/</a></dd><dt>Latest editor's draft:</dt><dd><a href="http://dev.w3.org/2009/dap/ReSpec.js/documentation.html">http://dev.w3.org/2009/dap/ReSpec.js/documentation.html</a></dd><dt>Previous version:</dt><dd>none</dd><dt>Editors:</dt><dd><a href="mailto:alexmog@microsoft.com">Alex Mogilevsky</a>, Microsoft Corporation</dd>
2224
<dd><a href="mailto:pcupp@microsoft.com">Phil Cupp</a>, Microsoft Corporation</dd>
2325
<dd><a href="mailto:mmielke@microsoft.com">Markus Mielke</a>, Microsoft Corporation</dd>
26+
<dd><a href="mailto:daniel.glazman@disruptive-innovations.com">Daniel Glazman</a>, Disruptive Innovations</dd>
2427
</dl><p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2010 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p><hr></div>
2528
<div class="introductory section" id="abstract"><h2>Abstract</h2>
2629
<p>
@@ -161,7 +164,8 @@ <h3><span class="secno">2.2 </span>Adapting to Available Space for Layout</h3>
161164
</p>
162165

163166
<pre class="example">&lt;style type="text/css"&gt;
164-
#grid { grid-columns: auto minmax(min-content, 1fr);
167+
#grid { display: grid;
168+
grid-columns: auto minmax(min-content, 1fr);
165169
grid-rows: auto minmax(min-content, 1fr) auto
166170
}
167171
#title { grid-column: 1; grid-row: 1 }
@@ -209,7 +213,8 @@ <h3><span class="secno">2.3 </span>Source Independence</h3>
209213
</p>
210214
<pre class="example">&lt;style type="text/css"&gt;
211215
@media (orientation: landscape) {
212-
#grid { grid-columns: auto minmax(min-content, 1fr);
216+
#grid { display: grid;
217+
grid-columns: auto minmax(min-content, 1fr);
213218
grid-rows: auto minmax(min-content, 1fr) auto
214219
}
215220
#title { grid-column: 1; grid-row: 1 }
@@ -219,7 +224,8 @@ <h3><span class="secno">2.3 </span>Source Independence</h3>
219224
#controls { grid-column: 2; grid-row: 2; grid-column-align: center }
220225
}
221226
@media (orientation: portrait) {
222-
#grid { grid-columns: auto minmax(min-content, 1fr);
227+
#grid { display: grid;
228+
grid-columns: auto minmax(min-content, 1fr);
223229
grid-rows: auto auto minmax(min-content, 1fr) auto
224230
}
225231
#title { grid-column: 1; grid-row: 1 }
@@ -265,7 +271,7 @@ <h3><span class="secno">2.4 </span>Grid Layering of Elements</h3>
265271
The <a href="#grid-element">Grid element</a>'s <a href="#grid-layer"><code>grid-layer</code></a> CSS property provides capabilities which are analagous to <code>z-index</code>.
266272
</p>
267273
<pre class="example">&lt;style type="text/css"&gt;
268-
#grid { grid-columns: auto 0.5fr auto auto 0.5fr auto }
274+
#grid { display: grid; grid-columns: auto 0.5fr auto auto 0.5fr auto }
269275
#lower-label { grid-column: 1; grid-row-align: center }
270276
#upper-label { grid-column: 6; grid-row-align: center }
271277
#track { grid-column: 2; grid-row-align: center}
@@ -544,7 +550,7 @@ <h3><span class="secno">5.1 </span>Fraction Values: 'fr'</h3>
544550
</ul>
545551
<br>
546552
<pre class="example">&lt;style type="text/css"&gt;
547-
#grid { grid-columns: 20px 30px 20px; grid-rows: 20px 30px }
553+
#grid { display: grid; grid-columns: 20px 30px 20px; grid-rows: 20px 30px }
548554
#A { grid-column: 1; grid-row: 1 }
549555
#B { grid-column: 2; grid-row: 1 }
550556
#C { grid-column: 3; grid-row: 1; grid-row-span: 2 }
@@ -737,7 +743,7 @@ <h3><span class="secno">6.1 </span>Implicit Columns and Rows</h3>
737743
</div>
738744
<br>
739745
<pre class="example">&lt;style type="text/css"&gt;
740-
#grid { grid-columns: 20px; grid-rows: 20px }
746+
#grid { display: grid; grid-columns: 20px; grid-rows: 20px }
741747
#A { grid-column: 1; grid-row: 1; grid-column-align: start; grid-row-align: start }
742748
#B { grid-column: 5; grid-row: 1; grid-row-span: 2; }
743749
#C { grid-column: 1; grid-row: 2; grid-column-span: 2; }
@@ -802,7 +808,7 @@ <h3><span class="secno">6.1 </span>Implicit Columns and Rows</h3>
802808
<a href="#grid-item">Grid Item</a> B is aligned in each figure to the ending edges of its row and column.
803809
</p>
804810
<pre class="example">&lt;style type="text/css"&gt;
805-
#grid { grid-columns: 1fr 1fr; grid-rows: 1fr 1fr }
811+
#grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr }
806812
#A { grid-column: 1; grid-row: 1; grid-column-align: start; grid-row-align: start }
807813
#B { grid-column: 2; grid-row: 2; grid-column-align: end; grid-row-align: end }
808814
&lt;/style&gt;
@@ -950,10 +956,10 @@ <h3><span class="secno">7.1 </span>Grid Item Alignment and Overflow</h3>
950956
</p>
951957
<br>
952958
<pre class="example">&lt;style type="text/css"&gt;
953-
#grid { grid-columns: 1fr 1fr; grid-rows: 1fr 1fr }
959+
#grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr }
954960
#A { grid-column: 1; grid-row: 2; grid-column-span: 2; grid-row-align: end }
955961
#B { grid-column: 1; grid-row: 1; grid-layer: 10 }
956-
#C { grid-column: 1; grid-row: 1; grid-row-align: start; margin-left: -20px }
962+
#C { grid-column: 2; grid-row: 1; grid-row-align: start; margin-left: -20px }
957963
#D { grid-column: 2; grid-row: 2; grid-column-align: end; grid-row-align: start }
958964
#E { grid-column: 1; grid-row: 1;
959965
grid-column-span: 2; grid-row-span: 2; grid-layer: 5;

0 commit comments

Comments
 (0)