Skip to content

Commit 011716f

Browse files
committed
Added more alternative names for the parts of a grid as found in some
books on grid-based layout. Added idea from June 2013 ftf for a property to switch a grid element between flowing its descendants (with flow/flow-into) and absolute positioning them (with grid-area). --HG-- extra : rebase_source : e95dde7cb87dd24d18add3dff25fedc44c218d46
1 parent e986f00 commit 011716f

1 file changed

Lines changed: 26 additions & 8 deletions

File tree

css-template/Overview.src.html

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -172,13 +172,17 @@ <h3>Summary and use cases</h3>
172172

173173
<p class=note>In some typographical traditions, the slots are called
174174
<span class=index title="field (of a typographical
175-
grid)">fields</span>.” Traditionally, also, all columns have the same
176-
width, called the “<span class=index title="module (of a typographical
177-
grid)">module</span>” or “<span class=index title="unit (of a
178-
typographical grid)">unit</span>,” so that the width of a field is
179-
always a multiple of the module. This specification does not use those
180-
terms, because equal-width columns is merely the default in CSS, which
181-
means the grid does not necessarily have a “module.”
175+
grid)">fields</span>” or “<span class=index title="spatial
176+
zone">spatial zones.</span>” Traditionally, also, all columns have the
177+
same width, called the “<span class=index title="module (of a
178+
typographical grid)">module</span>” or “<span class=index title="unit
179+
(of a typographical grid)">unit</span>.” The horizontal lines of a
180+
grid that define the rows are sometimes called “<span class=index
181+
title="flow line">flow lines.</span>” Some traditions make the space
182+
between pieces of content an explicit part of the grid, some consider
183+
the space part of the content: Both styles are possible in CSS, the
184+
latter by using the 'margin' property, the former by using the '.'
185+
symbol in a grid template.
182186

183187
<p>The typical use cases for these properties include:
184188

@@ -2192,10 +2196,24 @@ <h3>Stacking elements on top of a grid: 'grid-area' and 'grid-auto'</h3>
21922196
</table>
21932197

21942198
<div class=issue>
2199+
<p>In [[CSS3-GRID-LAYOUT]] (version of April 2013) there is no
2200+
'grid-area: none' but 'grid-area' only applies when 'position' is set
2201+
to 'grid' (a new keyword).
2202+
2203+
<p>There was also discussion (at the June 2013 ftf) to set a property
2204+
on the grid element itself to enable positioning of descendants. When
2205+
set (e.g., 'grid-mode: absolute'), all children are placed by means of
2206+
their 'grid-area' property, when not set ('grid-mode: normal'),
2207+
'grid-area' is ignored. That would preclude mixing flowing and
2208+
positioned descendants (except, perhaps, if it is an inherited
2209+
property and descendants can override it).
2210+
21952211
<p>At the Aug 2012 ftf, Florian suggested a property 'collision: auto
21962212
| collide | avoid' to switch between overlapping and not overlapping.
21972213
(It would avoid collisions for absolutely positioned elements as
2198-
well.) Instead of two properties 'flow' and 'grid-area', we could have
2214+
well.)
2215+
2216+
<p>Instead of two properties 'flow' and 'grid-area', we could have
21992217
just one, and then toggle between overlapping and flowing with the
22002218
'collision' property.
22012219

0 commit comments

Comments
 (0)