@@ -746,91 +746,6 @@ Subgrid Sizing Algorithm</h3>
746746 </ol>
747747 </div>
748748
749- <h2 id=alignment>
750- Aspect-ratio–controlled Gutters</h2>
751-
752- Issue: There's a desire for having row and column gaps maintain a particular aspect ratio.
753- This is one proposal for doing so; other ideas are welcome.
754- See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/1116">Issue 1116</a> .
755- Note this feature is likely to move to css-align-4,
756- it is just being drafted up here while css-align-3 stabilizes.
757-
758- <pre class="propdef partial">
759- Name : align-content, justify-content
760- New values : [ <<transfer-ratio>> <<content-distribution>>? ]
761- </pre>
762-
763-
764- <dl dfn-for="align-content,justify-content" dfn-type=value>
765- <dt> <dfn><transfer-ratio></dfn>
766- <dd>
767- A <a spec="css-values">dimension</a> with the unit ''tr'' ,
768- representing a multiplier against the analogous quantity
769- in the other dimension.
770- If that quantity cannot be determined
771- (e.g. is itself specified as a <<aspect-ratio>> , or otherwise can't be referenced),
772- then it is assumed to be zero.
773-
774- Note: This value can expand gutters
775- even when there is no free space left,
776- causing overflow.
777-
778- Specifically, an 'align-content' value of ''1tr'' represents
779- the amount of space (which may be zero) allocated between two adjacent
780- <a>alignment subjects</a> (<a>grid tracks</a> / <a>flex lines</a> / <a spec="css-multicol">column boxes</a> )
781- by the 'justify-content' property.
782- Unless a different <<content-distribution>> value is specified,
783- space is distributed according to the same <<content-distribution>> rules
784- as for 'justify-content' .
785- The behavior of <<number>> values for 'justify-content' is analogous.
786-
787- Note: The space allocated by ''align-content: 1tr'' will be zero
788- if 'justify-content' does not allocate space
789- between adjacent <a>alignment subjects</a> :
790- either due to not having a <<content-distribution>> value
791- or due to there being fewer than two <a>alignment subjects</a> .
792-
793- If both 'align-content' and 'justify-content' have <<number>> values,
794- then 'justify-content' ’s <<number>> value is ignored
795- and its <<content-distribution>> value honored as if specified alone.
796- If no <<content-distribution>> value was specified,
797- then 'justify-content' takes 'align-content' ’s <<content-distribution>> value
798- (if one was specified)
799- and otherwise falls back to ''space-between'' .
800- </dl>
801-
802- <div class="example">
803- In this example,
804- a minimum of 1em is required between rows and columns.
805- Additionally, any extra space in the inline axis
806- that is distributed between columns,
807- with full-size spaces on either side of the outermost columns.
808- The gaps between rows are increased to match the extra space
809- distributed between adjacent columns,
810- but no space is added before the first row or after the last one.
811-
812- <pre>
813- .grid {
814- grid-template-columns: repeat(auto-fill, 15em);
815- gap: 1em;
816- justify-content: space-evenly;
817- align-content: 1tr space-between;
818- }
819- </pre>
820-
821- This next example is the same as the previous,
822- except that the ratio between row and column gaps is φ:
823-
824- <pre>
825- .grid {
826- grid-template-columns: repeat(auto-fill, 15em);
827- gap: 1em 1.618em;
828- justify-content: space-evenly;
829- align-content: 0.618tr space-between;
830- }
831- </pre>
832- </div>
833-
834749<h2 id="changes">
835750Changes</h2>
836751
@@ -841,7 +756,7 @@ Changes</h2>
841756
842757 <ul>
843758 <li> Defined [=resolved value=] of 'grid-template-rows' and 'grid-template-columns' for [=subgrids=] .
844- <li> Renamed ''ar'' unit to ''tr'' .
759+ <li> Removed the aspect-ratio-controlled gutters feature (which will be moved to CSS Box Alignment Level 4 instead) .
845760 </ul>
846761
847762 <h3 class="no-num" id="changes-20180628">
0 commit comments