@@ -484,39 +484,41 @@ Subgrid Sizing Algorithm</h3>
484484Aspect-ratio–controlled Gutters</h2>
485485
486486 Issue: There's a desire for having row and column gaps maintain a particular aspect ratio.
487- This is one proposal for doing so; other ideas are welcome.<br>
488- Possible extension: allow aspect ratio multipliers on 'row-gap' and 'column-gap' as well (not really useful except if you're using percents).<br>
489- Possible variation: use an `ar` unit instead of bare <<number>> s.<br>
487+ This is one proposal for doing so; other ideas are welcome.
490488 See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/1116">Issue 1116</a> .
489+ Note this feature is likely to move to css-align-4,
490+ it is just being drafted up here while css-align-3 stabilizes.
491491
492492 <pre class="propdef">
493493 Name : align-content, justify-content
494- New values : [ <<number>> && <<content-distribution>>? ]
494+ New values : [ <<aspect-ratio>> <<content-distribution>>? ]
495495 </pre>
496496
497+
497498 <dl dfn-for="align-content,justify-content" dfn-type=value>
498- <dt> <dfn><<number> ></dfn>
499+ <dt> <dfn><aspect-ratio ></dfn>
499500 <dd>
500- Represents a multiplier against the analogous quantity
501+ A <a spec="css-values">dimension</a> with the unit ''ar'' ,
502+ representing a multiplier against the analogous quantity
501503 in the other dimension.
502504 If that quantity cannot be determined
503- (e.g. is itself specified as a <<number >> , or otherwise can't be referenced),
505+ (e.g. is itself specified as a <<aspect-ratio >> , or otherwise can't be referenced),
504506 then it is assumed to be zero.
505507
506508 Note: This value can expand gutters
507509 even when there is no free space left,
508510 causing overflow.
509511
510- Specifically, an 'align-content' value of ''1 '' represents
512+ Specifically, an 'align-content' value of ''1ar '' represents
511513 the amount of space (which may be zero) allocated between two adjacent
512- <a>alignment subjects</a> (<a>grid tracks</a> / <a>flex lines</a> / <a>column boxes</a> )
514+ <a>alignment subjects</a> (<a>grid tracks</a> / <a>flex lines</a> / <a spec="css-multicol" >column boxes</a> )
513515 by the 'justify-content' property.
514516 Unless a different <<content-distribution>> value is specified,
515517 space is distributed according to the same <<content-distribution>> rules
516518 as for 'justify-content' .
517519 The behavior of <<number>> values for 'justify-content' is analogous.
518520
519- Note: The space allocated by ''align-content: 1 '' will be zero
521+ Note: The space allocated by ''align-content: 1ar '' will be zero
520522 if 'justify-content' does not allocate space
521523 between adjacent <a>alignment subjects</a> :
522524 either due to not having a <<content-distribution>> value
@@ -546,7 +548,7 @@ Aspect-ratio–controlled Gutters</h2>
546548 grid-template-columns: repeat(auto-fill, 15em);
547549 gap: 1em;
548550 justify-content: space-evenly;
549- align-content: 1.0 space-between;
551+ align-content: 1ar space-between;
550552 }
551553 </pre>
552554
@@ -558,7 +560,7 @@ Aspect-ratio–controlled Gutters</h2>
558560 grid-template-columns: repeat(auto-fill, 15em);
559561 gap: 1em 1.618em;
560562 justify-content: space-evenly;
561- align-content: 0.618 space-between;
563+ align-content: 0.618ar space-between;
562564 }
563565 </pre>
564566 </div>
0 commit comments