11<pre class='metadata'>
22Title : CSS Grid Layout Module Level 1
3- Status : ED
4- Work Status : Testing
53Shortname : css-grid
64Level : 1
5+ Status : ED
6+ Work Status : Testing
77Group : csswg
8- ED : https://drafts.csswg.org/css-grid/
98TR : https://www.w3.org/TR/css-grid-1/
9+ ED : https://drafts.csswg.org/css-grid-1/
10+ Issue Tracking : Disposition of Comments https://drafts.csswg.org/css-grid-1/issues
11+ Issue Tracking : CSSWG GitHub https://github.com/w3c/csswg-drafts/issues?q=is%3Aopen+is%3Aissue+label%3Acss-grid-1
1012Implementation Report : https://wpt.fyi/results/css/css-grid
13+ WPT Path Prefix : css/css-grid/
1114Editor : Tab Atkins Jr., Google, http://www.xanthir.com/contact/, w3cid 42199
1215Editor : Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
1316Editor : Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885
1417Editor : Oriol Brufau, Igalia, obrufau@igalia.com, w3cid 108473
1518Former editor : Alex Mogilevsky, Microsoft Corporation, alexmog@microsoft.com
1619Former editor : Phil Cupp, Microsoft Corporation, pcupp@microsoft.com
17- Issue Tracking : Disposition of Comments https://drafts.csswg.org/css-grid-1/issues
20+
1821Abstract : This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.
1922Ignored Terms : auto, grid-*-start, grid-*-end, flex factor, flex factors, grid-auto-position
2023Ignored Vars : A, B, C, size-contribution, track-sizes, extra-space
2124Link Defaults : css2 (property) margin/min-height/max-height/min-width/max-width, css-align-3 (value) stretch/baseline, css-position-3 (property) left, css-position-3 (property) position, css-writing-modes-3 (dfn) start/end
2225At Risk : application of grid placement to absolutely-positioned boxes
23- WPT Path Prefix : css/css-grid/
2426Ignore MDN Failure : valdef-grid-template-columns-minmax
2527Ignore MDN Failure : subgrids
2628</pre>
2729
28- <pre class=" link-defaults" >
30+ <pre class=link-defaults>
2931spec:css-align-3;
3032 type:value;
3133 text:center; for:align-self;
@@ -34,6 +36,7 @@ spec:css-align-3;
3436 text:space-between; for:justify-content
3537 text:space-around; for:justify-content
3638 type:property; text:column-gap
39+ type: value; for:column-gap; text:normal
3740 type:dfn; text:alignment baseline
3841spec:css-break-3; type:dfn; text:fragment
3942spec:css-flexbox-1;
@@ -851,7 +854,7 @@ Establishing Grid Containers: the ''display/grid'' and ''inline-grid'' 'display'
851854
852855 <dt> <dfn>inline-grid</dfn>
853856 <dd>
854- This value causes an element to generate an <a>grid container</a> box
857+ This value causes an element to generate a <a>grid container</a> box
855858 that is <a>inline-level</a> when placed in <a>flow layout</a> .
856859 </dl>
857860
@@ -1112,7 +1115,6 @@ Grid Items</h2>
11121115 for the corresponding axis.
11131116 (See [[CSS2#q10.0]] .)
11141117
1115-
11161118 : ''align-self/stretch''
11171119 ::
11181120 Use the [=inline size=] calculation rules for non-replaced boxes
@@ -1457,7 +1459,7 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
14571459
14581460 These properties specify,
14591461 as a space-separated <dfn export>track list</dfn> ,
1460- the line names and <a>track sizing functions</a> of the <a>grid</a> .
1462+ the [= line names=] and <a>track sizing functions</a> of the <a>grid</a> .
14611463 The 'grid-template-columns' property specifies the <a>track list</a> for the grid's columns,
14621464 while 'grid-template-rows' specifies the <a>track list</a> for the grid's rows.
14631465
@@ -1475,7 +1477,7 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
14751477 <dt> <dfn id="track-listing"><<track-list>> | <<auto-track-list>></dfn>
14761478 <dd>
14771479 Specifies the <a>track list</a> as a series of <a>track sizing functions</a>
1478- and line names.
1480+ and [= line names=] .
14791481 Each <dfn dfn lt="track sizing function|sizing function">track sizing function</dfn> can be specified as a length,
14801482 a percentage of the <a>grid container</a> ’s size,
14811483 a measurement of the contents occupying the column or row,
@@ -1706,7 +1708,8 @@ Naming Grid Lines: the <css>[<<custom-ident>>*]</css> syntax</h4>
17061708<h4 id='repeat-notation'>
17071709Repeating Rows and Columns: the ''repeat()'' notation</h4>
17081710
1709- The <dfn>repeat()</dfn> notation represents a repeated fragment of the <a>track list</a> ,
1711+ The <dfn for="<track-repeat>,<auto-repeat>,<fixed-repeat>">repeat()</dfn> notation
1712+ represents a repeated fragment of the <a>track list</a> ,
17101713 allowing a large number of columns or rows that exhibit a recurring pattern
17111714 to be written in a more compact form.
17121715
@@ -1939,9 +1942,11 @@ Computed Value of a Track Listing</h4>
19391942
19401943 * a ''minmax()'' functional notation representing a single track's size,
19411944 with each <<length-percentage>> computed
1945+ (a <dfn noexport>computed track size</dfn> )
19421946 * a ''repeat()'' functional notation representing a repeated track list section,
19431947 with its <<integer>> computed
19441948 and its <<track-list>> represented as a [=computed track list=]
1949+ (a <dfn>computed repeat notation</dfn> )
19451950
19461951<!--
19471952████████ ████████ ██████ ███████ ██ ██ ██ ████████ ████████
@@ -2241,7 +2246,7 @@ Explicit Grid Shorthand: the 'grid-template' property</h3>
22412246 <div class='example'>
22422247 <pre> grid-template: auto 1fr / auto 1fr auto;</pre>
22432248
2244- is equivalent to
2249+ is equivalent to
22452250
22462251 <pre>
22472252 grid-template-rows: auto 1fr;
@@ -2411,11 +2416,14 @@ Implicit Track Sizing: the 'grid-auto-rows' and 'grid-auto-columns' properties</
24112416 </pre>
24122417
24132418 <figure>
2414- <img src="images/auto-flow.svg" alt="" width=530 height=530>
2415- <figcaption> A 2×2 grid with one explicit 20px×20px grid cell
2416- in the first row+column
2417- and three additional cells resulting from the implicit 40px column and row
2418- generated to hold the additional grid items.
2419+ <img src="images/auto-flow.svg" alt="" width=530 height=530>
2420+ <figcaption>
2421+ A 2×2 grid with
2422+ one explicit 20px×20px grid cell in the first row+column
2423+ and three additional cells resulting from
2424+ the implicit 40px column and row generated
2425+ to hold the additional grid items.
2426+ </figcaption>
24192427 </figure>
24202428 </div>
24212429
@@ -3043,7 +3051,7 @@ Line-based Placement: the 'grid-row-start', 'grid-column-start', 'grid-row-end',
30433051
30443052 <figure>
30453053 <img src="images/implicit-lines-search.svg" width=600>
3046- <figcaption> An illustration of the result.
3054+ <figcaption> An illustration of the result.</figcaption>
30473055 </figure>
30483056 </div>
30493057
@@ -3582,7 +3590,7 @@ Aligning with <a value for="margin">auto</a> margins</h3>
35823590
35833591 <li>
35843592 Overflowing [=grid items=] resolve their ''margin/auto'' margins to zero
3585- and ''justify-self/start'' -align within their [=containing block=] .
3593+ and overflow as specified by their <a>box alignment properties</a> .
35863594 </ul>
35873595
35883596<h3 id='row-align'>
@@ -3666,7 +3674,7 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties</h3>
36663674 Note that certain values of 'justify-content' and 'align-content'
36673675 can cause the tracks to be spaced apart
36683676 (''justify-content/space-around'' , ''justify-content/space-between'' , ''justify-content/space-evenly'' )
3669- or to be resized (''< content-distribution>/stretch'' ).
3677+ or to be resized (''< content-distribution>/stretch'' ).
36703678 If the <a>grid</a> is <a>fragmented</a> between tracks,
36713679 any such additional spacing between those tracks must be suppressed.
36723680
@@ -3695,13 +3703,13 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties</h3>
36953703 <img src="images/spanned-gap.svg"
36963704 alt="Grid with 10px gap and an element spanning all columns.
36973705 The sum of the columns is less than the width of the grid container." height="426" width="500">
3698- <figcaption> Grid before alignment</figure >
3706+ <figcaption> Grid before alignment</figcaption >
36993707 </figure>
37003708 <figure>
37013709 <img src="images/spanned-gap-align.svg"
37023710 alt="Same grid with increased gaps absorbing the excess grid container width.
37033711 The spanning element has grown to accommodate the extra space assigned to the gap it crosses." height="426" width="500">
3704- <figcaption> Grid after alignment</figure >
3712+ <figcaption> Grid after alignment</figcaption >
37053713 </figure>
37063714
37073715 Note that alignment (unlike 'gap' spacing)
@@ -4340,7 +4348,7 @@ Resolve Intrinsic Track Sizes</h3>
43404348 when items span across multiple tracks.
43414349 This algorithm embodies a number of heuristics
43424350 which have been seen to deliver good results on real-world use-cases,
4343- such as the “game”̣ examples earlier in this specification.
4351+ such as the “game” examples earlier in this specification.
43444352 This algorithm may be updated in the future
43454353 to take into account more advanced heuristics as they are identified.
43464354
@@ -4713,6 +4721,16 @@ Sample Fragmentation Algorithm</h3>
47134721 overflow the grid.
47144722 </p>
47154723
4724+ Privacy Considerations {#privacy}
4725+ ===============================================
4726+
4727+ Grid Layout introduces no new privacy leaks.
4728+
4729+ Security Considerations {#security}
4730+ =================================
4731+
4732+ Grid Layout introduces no new security considerations.
4733+
47164734<h2 class="no-num" id="acks">
47174735Acknowledgements</h2>
47184736
@@ -5197,7 +5215,7 @@ Major Changes</h4>
51975215 </ul>
51985216 </ins>
51995217
5200- <p><ins> Otherwise, the used <a>automatic minimum size</a> is <del> otherwise</del> zero, as usual.</p>
5218+ <p><ins> Otherwise,</ins> the used <a>automatic minimum size</a> is <del> otherwise</del> zero, as usual.</p>
52015219 </blockquote>
52025220
52035221 <wpt>
@@ -5265,12 +5283,14 @@ Minor Changes</h4>
52655283 <dt><del> A <a>flexible sizing function</a> </del>
52665284 <dd>
52675285 <del> Use the track’s initial <a>base size</a> as its initial <a>growth limit</a> .</del>
5286+ </dl>
52685287 </blockquote>
52695288 <blockquote>
52705289 <ul>
52715290 <li>
52725291 <del> treating <a>flexible tracks</a> as having
5273- an infinite <a>growth limit</a>
5292+ an infinite <a>growth limit</a> </del>
5293+ </ul>
52745294 </blockquote>
52755295 This change is purely editorial; it should have no effect on implementations.
52765296
@@ -5297,7 +5317,7 @@ Minor Changes</h4>
52975317 <ol>
52985318 <li>
52995319 <p><ins> Find the first (last) row of the [=grid container=]
5300- containing at least one [=grid item=] .
5320+ containing at least one [=grid item=] .</ins>
53015321
53025322 <p><del> If any of the <a>grid items</a> whose areas intersect the <a>grid container</a> ’s first (last) row
53035323 participate in <a>baseline alignment</a> ,</del>
@@ -5563,7 +5583,8 @@ Clarifications</h4>
55635583
55645584 <p class=note> Note: If the affected size was a <a>growth limit</a>
55655585 <ins> and the track is not marked [=infinitely growable=] ,
5566- then each |item-incurred increase| will be zero.
5586+ then each |item-incurred increase| will be zero</ins>
5587+ <del> this step has no effect</del> .
55675588 </blockquote>
55685589 </ul>
55695590
@@ -5738,7 +5759,7 @@ Significant Adjustments and Fixes</h4>
57385759 Note: Since <a>grid items</a> whose own size
57395760 depends on the size of an intrinsically-sized track
57405761 [[#row-align|do not participate in baseline alignment]] ,
5741- they are not shimmed.
5762+ they are not shimmed.</p>
57425763 </ins>
57435764 </blockquote>
57445765
@@ -5887,7 +5908,7 @@ Significant Adjustments and Fixes</h4>
58875908 <blockquote>
58885909 As a <a>block-level</a> box in a <a>block formatting context</a> ,
58895910 it is sized like a <a>block box</a> that establishes a formatting context,
5890- with an ''auto'' <a>inline size</a> calculated as for <del> in-flow</del><ins> non-replaced</a > block boxes.
5911+ with an ''auto'' <a>inline size</a> calculated as for <del> in-flow</del><ins> non-replaced</ins > block boxes.
58915912 </blockquote>
58925913 <li id="change-2016-tracks-before">
58935914 Fixed error in pattern repetition for finding <a>implicit grid track</a> sizes.
@@ -5973,17 +5994,6 @@ Clarifications</h4>
59735994 <li> Miscellaneous trivial fixes and minor editorial improvements.
59745995 </ul>
59755996
5976-
5977- Privacy Considerations {#privacy}
5978- ===============================================
5979-
5980- Grid Layout introduces no new privacy leaks.
5981-
5982- Security Considerations {#security}
5983- =================================
5984-
5985- Grid Layout introduces no new security considerations.
5986-
59875997<wpt ignore>
59885998 abspos/absolute-positioning-changing-containing-block-001.html
59895999 abspos/absolute-positioning-definite-sizes-001.html
0 commit comments