Skip to content

Commit 558b300

Browse files
committed
[css-grid-2] Remove aspect-ratio-controlled gutters section (deferred to css-align-4).
1 parent fce627f commit 558b300

File tree

1 file changed

+1
-86
lines changed

1 file changed

+1
-86
lines changed

css-grid-2/Overview.bs

Lines changed: 1 addition & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -746,91 +746,6 @@ Subgrid Sizing Algorithm</h3>
746746
</ol>
747747
</div>
748748

749-
<h2 id=alignment>
750-
Aspect-ratio&ndash;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>&lt;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 &phi;:
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">
835750
Changes</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

Comments
 (0)