Skip to content

Commit f9eba79

Browse files
kbabbittkbabbitt
committed
[css-gaps-1][editorial] Unify per-layout gap definitions and related text. w3c#13089 
1 parent 7ceac3b commit f9eba79

1 file changed

Lines changed: 92 additions & 129 deletions

File tree

‎css-gaps-1/Overview.bs‎

Lines changed: 92 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,96 @@ Gaps Between Boxes</h2>
8080
<a href="http://www.w3.org/TR/css-flexbox/">flex</a>,
8181
and <a href="http://www.w3.org/TR/css-grid/">grid layout</a>.
8282

83+
A <dfn>gap</dfn> is either a <dfn>column gap</dfn> or <dfn>row gap</dfn>,
84+
whose definitions vary by type of container:
85+
86+
<dl>
87+
<dt id="gap-multicol"><a>multi-column containers</a>
88+
<dd>
89+
A [=column gap=] is the [=gutter=] between adjacent <a>column boxes</a>,
90+
see [[CSS-MULTICOL-1]].
91+
92+
A [=row gap=] is the [=gutter=] between the rows of [=column boxes=] established by 'column-height',
93+
see [[CSS-MULTICOL-2]].
94+
95+
<dt id="gap-flex"><a>flex containers</a>
96+
<dd>
97+
When applied to the <a>main axis</a>
98+
(e.g. [=column gap=] in a ''flex-flow/row'' <a>flex container</a>),
99+
refers to the [=gutter=] between items
100+
(as if an additional fixed-size margin were inserted
101+
between adjacent <a>flex items</a>
102+
in a single line).
103+
104+
When applied to the <a>cross axis</a>
105+
(e.g. [=row gap=] in a ''flex-flow/row'' <a>flex container</a>),
106+
refers to the [=gutter=] between adjacent <a>flex lines</a>.
107+
108+
<dt id="gap-grid"><a>grid containers</a>
109+
<dd>
110+
[=Row gap=] and [=column gap=],
111+
in the context of a <a>grid container</a>,
112+
refer to the [=gutters=] between <a>grid rows</a> and <a>grid columns</a>,
113+
respectively.
114+
See [[css-grid-1#gutters]] for precise details.
115+
</dl>
116+
117+
Gutters effect a minimum spacing between items:
118+
additional spacing may be added by 'justify-content'/'align-content'.
119+
Such additional space increases the size of the corresponding [=gaps=].
120+
121+
In all cases, the [=gap=] disappears when it coincides with
122+
a [=fragmentation break=]. [[CSS-BREAK-3]]
123+
124+
Note: Table boxes do not use the 'gap' properties
125+
to specify separation between their cells.
126+
Instead, they use the 'border-spacing' property,
127+
which has slightly different functionality:
128+
it inherits,
129+
and it also specifies the additional spacing between the outermost cells
130+
and the border of the table
131+
(similar to ''space-evenly'' rather than ''space-between'').
132+
133+
<div class="example">
134+
<figure>
135+
<img alt="" src="images/multicol-gaps-2.png">
136+
<figcaption>
137+
[=Column gaps=] in orange in a multicol container with a spanner element.
138+
Note that [=column gaps=] break when they encounter the spanner.
139+
</figcaption>
140+
</figure>
141+
</div>
142+
143+
<div class="example">
144+
<figure>
145+
<img alt="" src="images/multicol-gaps.png">
146+
<figcaption>
147+
Gaps in a multicol container with `column-wrap: wrap`; [=column gaps=] in orange and [=row gaps=] in blue).
148+
Note that [=column gaps=] in multicol containers do not overlap [=row gaps=], similar to flex.
149+
</figcaption>
150+
</figure>
151+
</div>
152+
153+
<div class="example">
154+
<figure>
155+
<img alt="" src="images/grid-gaps.png">
156+
<figcaption>
157+
Gaps in a grid container; [=column gaps=] in orange and [=row gaps=] in blue.
158+
Note the shaded areas where gaps overlap.
159+
</figcaption>
160+
</figure>
161+
</div>
162+
163+
<div class="example">
164+
<figure>
165+
<img alt="" src="images/flex-gaps.png">
166+
<figcaption>
167+
Gaps in a flex container; [=column gaps=] in orange and [=row gaps=] in blue.
168+
Note that, unlike in grid, gaps in flex do not overlap.
169+
</figcaption>
170+
</figure>
171+
</div>
172+
83173
<h3 id='column-row-gap'>
84174
Row and Column Gutters: the 'row-gap' and 'column-gap' properties</h3>
85175

@@ -112,9 +202,8 @@ Row and Column Gutters: the 'row-gap' and 'column-gap' properties</h3>
112202
: <<length-percentage [0,∞]>>
113203
: <<line-width>>
114204
::
115-
Specifies a gap between “rows” or “columns”,
116-
as defined by the layout modes to which it applies;
117-
see subsections below for details.
205+
Specifies a [=row gap=] or [=column gap=]
206+
as defined by the layout modes to which it applies.
118207

119208
Negative values are invalid.
120209
For percentages,
@@ -126,54 +215,6 @@ Row and Column Gutters: the 'row-gap' and 'column-gap' properties</h3>
126215
and a used value of ''0px'' in all other contexts.
127216
</dl>
128217

129-
Gutters effect a minimum spacing between items:
130-
additional spacing may be added by 'justify-content'/'align-content'.
131-
Such additional space effectively increases the size of these <a>gutters</a>.
132-
133-
The exact handling of these properties varies by layout container:
134-
135-
<dl>
136-
<dt id="gap-multicol"><a>multi-column containers</a>
137-
<dd>
138-
'column-gap' specifies the [=gutter=] between adjacent <a>column boxes</a>,
139-
see [[CSS-MULTICOL-1]].
140-
'row-gap' specifies the [=gutter=] between the rows of [=column boxes=] established by 'column-height',
141-
see [[CSS-MULTICOL-2]].
142-
143-
<dt id="gap-flex"><a>flex containers</a>
144-
<dd>
145-
When applied to the <a>main axis</a>
146-
(e.g. 'column-gap' in a ''flex-flow/row'' <a>flex container</a>),
147-
indicates the [=gutter=] between items
148-
(as if an additional fixed-size margin were inserted
149-
between adjacent <a>flex items</a>
150-
in a single line).
151-
152-
When applied to the <a>cross axis</a>
153-
(e.g. 'row-gap' in a ''flex-flow/row'' <a>flex container</a>),
154-
indicates the [=gutter=] between adjacent <a>flex lines</a>.
155-
156-
<dt id="gap-grid"><a>grid containers</a>
157-
<dd>
158-
The 'row-gap' and 'column-gap' properties,
159-
when specified on a <a>grid container</a>,
160-
define the [=gutters=] between <a>grid rows</a> and <a>grid columns</a>,
161-
respectively.
162-
See [[css-grid-1#gutters]] for precise details.
163-
</dl>
164-
165-
In all cases, the [=gutter=] disappears when it coincides with
166-
a [=fragmentation break=]. [[CSS-BREAK-3]]
167-
168-
Note: Table boxes do not use the 'gap' properties
169-
to specify separation between their cells.
170-
Instead, they use the 'border-spacing' property,
171-
which has slightly different functionality:
172-
it inherits,
173-
and it also specifies the additional spacing between the outermost cells
174-
and the border of the table
175-
(similar to ''space-evenly'' rather than ''space-between'').
176-
177218
<h3 id='gap-shorthand'>
178219
Gap Shorthand: the 'gap' property</h3>
179220

@@ -248,84 +289,6 @@ Legacy Gap Properties: the 'grid-row-gap', 'grid-column-gap', and 'grid-gap' pro
248289
* <dfn property>grid-column-gap</dfn> as a [=legacy name alias=] of the 'column-gap' property
249290
* <dfn property>grid-gap</dfn> as a [=legacy name alias=] of the 'gap' property
250291

251-
<h2 id="gaps">
252-
Gaps</h2>
253-
254-
Various layouts in CSS such as
255-
<a>multicol containers</a>, <a>flex containers</a>, <a>grid containers</a>, and <a>grid lanes containers</a>
256-
position child boxes adjacent to each other with [=gaps=], also known as <a>gutters</a>, between them.
257-
258-
For the purposes of this specification, <dfn>gap</dfn>, <dfn>column gap</dfn>, and <dfn>row gap</dfn> are defined as follows depending on the type of container:
259-
260-
<dl>
261-
<dt id="gap-multicol"><a>multi-column containers</a>
262-
<dd>
263-
In the column direction, [=gap=] ([=column gap=]) refers to the [=gutter=] between adjacent <a>column boxes</a> within each [=multicol line=],
264-
see [[CSS-MULTICOL-1]].
265-
In the row direction, [=gap=] ([=row gap=]) refers to the [=gutter=] between the rows of [=column boxes=] established by 'column-height',
266-
see [[CSS-MULTICOL-2]].
267-
268-
<dt id="gap-flex"><a>flex containers</a>
269-
<dd>
270-
In the <a>main axis</a>
271-
(e.g. 'column-gap' in a ''flex-flow/row'' <a>flex container</a>),
272-
[=gap=] ([=column gap=]) refers to the [=gutter=] between items within a single [=flex line=].
273-
274-
In the <a>cross axis</a>
275-
(e.g. 'row-gap' in a ''flex-flow/row'' <a>flex container</a>),
276-
[=gap=] ([=row gap=]) refers to the [=gutter=] between adjacent <a>flex lines</a>.
277-
<dt id="gap-grid"><a>grid containers</a>
278-
<dd>
279-
[=row gaps=] and [=column gaps=]
280-
refer to the [=gutters=] between <a>grid rows</a> and <a>grid columns</a>,
281-
respectively.
282-
See [[css-grid-1#gutters]] for precise details.
283-
</dl>
284-
285-
Note: As specified in [[CSS-ALIGN-3#column-row-gap]],
286-
additional spacing between items added by 'justify-content' and 'align-content'
287-
is included in [=gap=] size.
288-
289-
<div class="example">
290-
<figure>
291-
<img alt="" src="images/multicol-gaps-2.png">
292-
<figcaption>
293-
[=Column gaps=] in orange in a multicol container with a spanner element.
294-
Note that [=column gaps=] break when they encounter the spanner.
295-
</figcaption>
296-
</figure>
297-
</div>
298-
299-
<div class="example">
300-
<figure>
301-
<img alt="" src="images/multicol-gaps.png">
302-
<figcaption>
303-
Gaps in a multicol container with `column-wrap: wrap`; [=column gaps=] in orange and [=row gaps=] in blue).
304-
Note that [=column gaps=] in multicol containers do not overlap [=row gaps=], similar to flex.
305-
</figcaption>
306-
</figure>
307-
</div>
308-
309-
<div class="example">
310-
<figure>
311-
<img alt="" src="images/grid-gaps.png">
312-
<figcaption>
313-
Gaps in a grid container; [=column gaps=] in orange and [=row gaps=] in blue.
314-
Note the shaded areas where gaps overlap.
315-
</figcaption>
316-
</figure>
317-
</div>
318-
319-
<div class="example">
320-
<figure>
321-
<img alt="" src="images/flex-gaps.png">
322-
<figcaption>
323-
Gaps in a flex container; [=column gaps=] in orange and [=row gaps=] in blue.
324-
Note that, unlike in grid, gaps in flex do not overlap.
325-
</figcaption>
326-
</figure>
327-
</div>
328-
329292
<!-- Big Text: Decorations
330293

331294
████▌ █████▌ ███▌ ███▌ ████▌ ███▌ █████▌ ████ ███▌ █ █▌ ███▌

0 commit comments

Comments
 (0)