Skip to content

Commit 8ebf606

Browse files
alexmog1alexmog1
committed
editor draft update -- editing work in progress
1 parent 086082f commit 8ebf606

3 files changed

Lines changed: 74 additions & 50 deletions

File tree

‎css3-grid/grid1.jpg‎

-15.4 KB
Loading

‎css3-grid/grid1_small.jpg‎

158 KB
Loading

‎css3-grid/overview.src.html‎

Lines changed: 74 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html public '-//W3C//DTD HTML 4.01//EN'
22
'http://www.w3.org/TR/html4/strict.dtd'>
3-
<html lang="en">
3+
<html lang="en" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
44
<head>
55
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
66
<title>CSS Grid Positioning Module Level 3</title>
@@ -12,7 +12,8 @@
1212
.gap { position: absolute; background: black; width: 5px; bottom: 0px; top: 0px; border: 10px solid red; border-top-width: 0; border-bottom-width: 0; }
1313
.rep { position: absolute; background: #333; height: 110px; width: 100px; color: white; z-index: 4 }
1414

15-
.todo { color:red; font-style:italic;}
15+
.issue { color:red; font-style:italic;}
16+
.todo { background:yellow; font-style:italic;}
1617
</style>
1718

1819
<link rel="stylesheet" type="text/css"
@@ -38,12 +39,10 @@ <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
3839
<dt>Previous version:</dt>
3940
<dd>none
4041
<dt>Editors:</dt>
41-
42-
<dd>Alex Mogilevsky, Microsoft, alexmog@microsoft.com</dd>
43-
44-
<dd>Markus Mielke, Microsoft, mmielke@microsoft.com</dd>
45-
46-
42+
<dd>Alex Mogilevsky, Microsoft, <a href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a></dd>
43+
<dt>Authors:</dt>
44+
<dd>Alex Mogilevsky, Microsoft, <a href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a></dd>
45+
<dd>Markus Mielke, Microsoft, <a href="mailto:alexmog@microsoft.com">mmielke@microsoft.com</a></dd>
4746
</dl>
4847
<!--begin-copyright-->
4948
<p>[If you keep the &lt;!--comment--&gt;, the copyright will be included
@@ -104,16 +103,13 @@ <h2>Introduction</h2>
104103
author, or can be implied from existing two-dimensional structures (tables or
105104
multi-column elements).</p>
106105
<p>Grid positioning addresses layout in continuous media and in paged media.</p>
107-
<p>Note that the adaptive grid is even more powerful when used in combination
108-
with [[MEDIAQ]].</p>
109-
110106
<h2>Examples</h2>
111107
<p>Let&#39;s start with an illustration of grid in action.</p>
112108

113109
<h3>Example 1</h3>
114110

115111
<div class="figure">
116-
<img src="grid1.jpg" alt="example of a 3-column layout with an image that spans the whole page and a 2-column box in bottom left corner">
112+
<img src="grid1_small.jpg" alt="example of a 3-column layout with an image that spans the whole page and a 2-column box in bottom left corner">
117113
<p class="caption">Floats in multi-column layout</p>
118114
</div>
119115

@@ -128,14 +124,14 @@ <h3>Example 1</h3>
128124
</pre>
129125
</div>
130126

131-
<p>The statement &quot;float:page bottom left&quot; here positions the image at the
127+
<p>The statement &quot;float:page bottom left&quot; positions the image at the
132128
bottom left corner of the page (as defined in [[CSS3GCPM]])</p>
133129
<p>Property &quot;width:3gr&quot; makes it 3 &quot;grid units&quot; wide, where a &quot;grid unit&quot; is the
134130
distance between two adjacent grid lines. Each boundary between a column and a
135131
gap automatically produces a grid line, therefore to specify &quot;two columns,
136132
including the gap between columns, but not including any gaps outside the
137133
columns&quot; we can just say &quot;3gr&quot;.</p>
138-
<p>Also, in this example the designer has added a horizontal line to align
134+
<p>Also, in this example the author has added a horizontal line to align
139135
illustrations with. This can be done by explicitly defining grid lines:</p>
140136

141137

@@ -145,7 +141,7 @@ <h3>Example 1</h3>
145141
<strong>grid-rows: 1.5in 1fr;</strong> }
146142

147143
div.illustrations
148-
{ float:page top left; width:100%; height:1gr;}
144+
{ float:page top left; width:5gr; height:1gr;}
149145

150146
float1 { float:page bottom left; width:3gr; }
151147

@@ -175,35 +171,30 @@ <h3>Example 2 </h3>
175171
(see [[SXSWGRIDS]] for how exactly this was built).
176172
Note how groups of elements are aligned with different sets of grid lines.</p>
177173
<div class="figure">
178-
<img src="Yeeaahh_grid.png" style="float:left"
174+
<img src="Yeeaahh_grid.png" style="float:left; width:9cm;"
179175
alt="[image of a complex page with overlaid grid]">
180-
<img src="Yeeaahh.png" style="float:left" alt="[image of complex page]">
176+
<img src="Yeeaahh.png" style="float:left; width:9cm;" alt="[image of complex page]">
181177
<p class="caption" style="clear:left">Complex site designed with a grid</p>
178+
182179
</div>
183180

184181
<h2>Grid
185182
declarations</h2>
186183

187-
<p>There are three ways to define a grid.</p>
184+
<p>There are two ways to define a grid.</p>
188185

189186
<ol>
190187
<li>Explicit grid: defined with &#39;grid-columns&#39;, &#39;grid-rows&#39; properties.</li>
191-
<li>Natural grid: automatically created by elements with a natural grid
188+
<li>Implicit grid: automatically created by elements with a natural grid
192189
structure (multi-column elements and tables). </li>
193-
<li>Default grid: all other block elements define a single-cell grid.</li>
194190
</ol>
195191

196192

197193
<h3>Explicit grid</h3>
198194

199-
<p>Outer edges of content box always define grid lines. In LTR
200-
layout, left and top edges define lines that we refer as horizontal and
201-
vertical line zero (right and top in RTL). The opposite edges also define
202-
grid lines. </p>
203-
204-
<p>Additional grid lines can be added in the middle with
205-
'grid-columns' and 'grid-rows' properties.</p>
206-
195+
<p>Grid lines can be defined in terms of rows and columns.&nbsp;Rows are always
196+
horizontal and columns are always vertical (this doesn&#39;t change in vertical
197+
writing modes)</p>
207198
<h4>'grid-columns' and 'grid-rows' properties</h4>
208199

209200
<table class="propdef">
@@ -216,7 +207,7 @@ <h4>'grid-columns' and 'grid-rows' properties</h4>
216207
<tr>
217208
<td>Value: </td>
218209
<td>[[&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt;] | <br />
219-
([&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt; ]+)['['&lt;integer&gt;']']? ]+ | <br />
210+
repeat([&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt; ]+)]+ | <br />
220211
none | inherit
221212
</td>
222213
</tr>
@@ -226,15 +217,15 @@ <h4>'grid-columns' and 'grid-rows' properties</h4>
226217
</tr>
227218
<tr>
228219
<td>Applies to: </td>
229-
<td>all elements </td>
220+
<td>non-replaced block-level elements </td>
230221
</tr>
231222
<tr>
232223
<td>Inherited: </td>
233224
<td>no </td>
234225
</tr>
235226
<tr>
236227
<td>Percentages: </td>
237-
<td><span>refer to width of containing block</span></td>
228+
<td><span>refer to width of the block</span></td>
238229
</tr>
239230
<tr>
240231
<td>Media: </td>
@@ -269,15 +260,15 @@ <h4>'grid-columns' and 'grid-rows' properties</h4>
269260
</tr>
270261
<tr>
271262
<td>Applies to: </td>
272-
<td>all elements </td>
263+
<td>non-replaced block-level elements </td>
273264
</tr>
274265
<tr>
275266
<td>Inherited: </td>
276267
<td>no </td>
277268
</tr>
278269
<tr>
279270
<td>Percentages: </td>
280-
<td><span>refer to height of containing block</span></td>
271+
<td><span>refer to height of block</span></td>
281272
</tr>
282273
<tr>
283274
<td>Media: </td>
@@ -290,15 +281,32 @@ <h4>'grid-columns' and 'grid-rows' properties</h4>
290281
</tr>
291282
</table>
292283

293-
<p>Space for each column or row of the grid can be defined as</p>
284+
<p >When grid-rows or grid-columns are specified, grid lines are defined as
285+
follows:</p>
286+
<ol>
287+
<li>&#39;start&#39; edge of content box (logical start according to writing mode)
288+
defines a grid line</li>
289+
<li>each row or column of specified grid adds one line at the specified
290+
distance from previous line </li>
291+
<li>if the last specified row or column does not reach the &#39;end&#39; edge of the
292+
content box, another grid line is added at the edge of the content box</li>
293+
</ol>
294+
<p >&nbsp;</p>
295+
<p >Space for each column or row of the grid can be defined as</p>
294296

295297
<ul>
296298
<li><b>Length</b>.<ul>
297299
<li>Note that gr
298300
unit can also be used here (it refers to grid of the containing block)</li>
299301
</ul>
300302
</li>
301-
<li><b>Percentage</b> of containing block height and width</li>
303+
<li><b>Percentage</b> of containing block height and width<ul>
304+
<li>Exact behavior of percentage when mixed with other units and/or
305+
total percentage not equal to 100% is UA-specific. If possible UA should
306+
apply the same distribution algorithm as for column widths of an empty
307+
table</li>
308+
</ul>
309+
</li>
302310
<li><strong>Fraction</strong> is a non-negative floating-point number
303311
followed by &#39;fr&#39;. Each fraction value takes portion of available space
304312
proportional to the number. </li>
@@ -319,11 +327,10 @@ <h4>'grid-columns' and 'grid-rows' properties</h4>
319327
</ul>
320328

321329
<p class="issue">&#39;fr&#39; needs a precise definition. It is possible that there
322-
isn&#39;t any space to distribute between fractions, what happens then?</p>
323-
<p>Also, grid lines can be defined in repeating groups. A group
324-
is enclosed in parentheses and optionally specifies a maximum number of
325-
repetitions in square brackets. Nested repeating groups are not allowed.</p>
326-
330+
isn&#39;t any space to distribute between fractions, what happens then? fr
331+
becomes zero?</p>
332+
<p>Grid lines can be defined in repeating groups using &quot;repeat()&quot;
333+
construct. Nested repeating groups are not allowed.</p>
327334
<p>For example this rule</p>
328335

329336
<div class="example">
@@ -339,6 +346,11 @@ <h4>'grid-columns' and 'grid-rows' properties</h4>
339346
</ul>
340347

341348

349+
<p class="issue">It was proposed that property names refer to horizontalvertical
350+
lines instead of rows/columns (because they in fact define lines, not rows and
351+
columns). Possible alternatives: <strong>
352+
grid-horizontal-lines/grid-vertical-lines; </strong>or perhaps simply <strong>
353+
grid-horizontal/grid-vertical.</strong></p>
342354
<p class="issue">It was proposed to have syntax for repeating a certain number
343355
of times. It is not strictly necessary (if the number of times is known the
344356
values can be repeated inline) but handy.</p>
@@ -356,23 +368,25 @@ <h4>Multi-column
356368

357369
<h4>Table</h4>
358370

359-
<p>There is one grid line per row and per column. The line is
360-
at the row/column boundary. </p>
361-
362-
<div>
363-
364-
<p class="issue">A possible alternative is to have two lines per table
365-
row/column, on both sides of border-spacing. In collapsing borders model these
366-
border lines would also collapse in one.</p>
367-
368-
</div>
371+
<p>Border box of each table column defines two vertical lines; border box of
372+
each table row defines two horizontal lines. In collapsing border model there is
373+
always a pair of identical grid lines between each pair of rows and columns.
374+
Maintaining same amount of lines per column keeps the definition consistent
375+
across all table models and multi-column elements (e.g. a span over 2 columns is
376+
always 3gr)</p>
377+
<p class="issue">Definition of a grid for a table is only meaningful if there is
378+
something that can use it. Currently there are no table floats. Should there be?
379+
Something like &quot;float:top left table; float-offset:2gr 4gr&quot; would use the table
380+
grid. Is there a use case for such floats?</p>
369381

370382
<h4>Priority
371383
of explicit grid definition</h4>
372384

373385
<p>If explicit grid properties grid-columns or grid-rows are
374386
specified on an element with an implicit grid the explicit properties have
375387
priority.</p>
388+
<p>&nbsp;</p>
389+
<p class="todo">editing work in progress... continue editing from here down...</p>
376390

377391
<h2>Grid container</h2>
378392

@@ -576,6 +590,16 @@ <h2>Grid in overflow</h2>
576590

577591
<h2>Issues</h2>
578592

593+
<h3>Containing block</h3>
594+
<p>Does a grid (implicit or explicit) add another definition to &quot;containing
595+
block&quot;? It would be great to say No and keep unit definition separate from
596+
choice of sizing/positioning container.</p>
597+
<h3>Additional implicit grid lines</h3>
598+
<p class="MsoNormal"><span style="color:#1F497D">On the implicit grids for
599+
multi-column elements, it might be useful to have one grid line on the left and
600+
right edge of each column, as well as a single grid line between each pair of
601+
columns. Perhaps doing the same thing for tables, one line on each side of the
602+
border spacing and another at the row/column boundary.<o:p></o:p></span></p>
579603
<h3>Snap to grid</h3>
580604

581605
<p class="issue">Should there be an option to align flow content to next

0 commit comments

Comments
 (0)