8000 csswg-drafts/css-grid/Overview.html at 73071c8d06e0b622ed51f7c41e807e2094e4da7d · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
4272 lines (3370 loc) · 162 KB

Overview.html

File metadata and controls

4272 lines (3370 loc) · 162 KB
&lt;/style></pre>
<p> A <a href="#grid-item"><i>grid item</i></a>’s <a
href="#grid-area"><i>grid area</i></a> forms the containing block into
which it is laid out. Percentage lengths specified on a <a
href="#grid-item"><i>grid item</i></a> resolve against this containing
block. Percentages specified for ‘<code
class=property>margin-top</code>’, ‘<code
class=property>padding-top</code>’, ‘<code
class=property>margin-bottom</code>’, and ‘<code
class=property>padding-bottom</code>’ on a <a href="#grid-item"><i>grid
item</i></a> resolve against the height of its containing block, rather
than the width (as for blocks).
<p> <a href="#grid-item"><i>Grid items</i></a> placed into the same <a
href="#grid-area"><i>grid area</i></a> do not directly affect each other's
layout. Indirectly, a <a href="#grid-item"><i>grid item</i></a> can affect
the position of a <a href="#grid-line"><i>grid line</i></a> in a column or
row that uses a contents-based relative size, which in turn can affect the
position or size of another <a href="#grid-item"><i>grid item</i></a>.
<h2 id=grid-model><span class=secno>3. </span> Grid Layout Box Model</h2>
<h3 id=grid-containers><span class=secno>3.1. </span> Grid Containers: the
‘<a href="#display-grid"><code class=css>grid</code></a>’ and ‘<a
href="#display-inline-grid"><code class=css>inline-grid</code></a>’
‘<code class=property>display</code>’ values</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td>display
<tr>
<th><a href="#values">New Values</a>:
<td>grid | inline-grid
</table>
<dl>
<dt><dfn id=display-grid>‘<code class=css>grid</code>’</dfn>
<dd> This value causes an element to generate a block-level <a
href="#grid-container"><i>grid container</i></a> box.
<dt><dfn id=display-inline-grid>‘<code
class=css>inline-grid</code>’</dfn>
<dd> This value causes an element to generate an inline-level <a
href="#grid-container"><i>grid container</i></a> box.
</dl>
<p> A <dfn id=grid-container>grid container</dfn> establishes a new <dfn
id=grid-formatting-context>grid formatting context</dfn> for its contents.
This is the same as establishing a block formatting context, except that
grid layout is used instead of block layout: floats do not intrude into
the grid container, and the grid container's margins do not collapse with
the margins of its contents. <a href="#grid-container"><i>Grid
containers</i></a> form a containing block for their contents <a
href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">exactly
like block containers do</a>. <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> The ‘<code
class=property>overflow</code>’ property applies to <a
href="#grid-container"><i>grid containers</i></a>.
<p> Grid containers are not block containers, and so some properties that
were designed with the assumption of block layout don't apply in the
context of grid layout. In particular:
<ul>
<li> all of the ‘<code class=css>column-*</code>’ properties in the
Multicol module have no effect on a grid container.
<li> ‘<code class=property>float</code>’ and ‘<code
class=property>clear</code>’ have no effect on a <a
href="#grid-item"><i>grid item</i></a>. (However, the ‘<code
class=property>float</code>’ property still affects the computed value
of ‘<code class=property>display</code>’ on children of a grid
container, as this occurs <em title="">before</em> <a
href="#grid-item"><i>grid items</i></a> are determined.)
<li> ‘<code class=property>vertical-align</code>’ has no effect on a
grid item.
<li> the ‘<code class=css>::first-line</code>’ and ‘<code
class=css>::first-letter</code>’ pseudo-elements do not apply to <a
href="#grid-container"><i>grid containers</i></a>.
</ul>
<p> If an element's specified ‘<code class=property>display</code>’ is
‘<a href="#display-inline-grid"><code
class=css>inline-grid</code></a>’ and the element is floated or
absolutely positioned, the computed value of ‘<code
class=property>display</code>’ is <a href="#display-grid">‘<code
class=css>grid</code>’</a>. The table in <a
href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter
9.7</a> is thus amended to contain an additional row, with ‘<a
href="#display-inline-grid"><code class=css>inline-grid</code></a>’ in
the "Specified Value" column and <a href="#display-grid">‘<code
class=css>grid</code>’</a> in the "Computed Value" column.
<h3 id=subgrids-the-subgrid-display-value><span class=secno>3.2.
</span>Subgrids: the ‘<code class=css>subgrid</code>’ ‘<code
class=property>display</code>’ value</h3>
<div class=issue> This is a proposal to address the alignment of sub-items
across grid items, so that, for example, a grid of labels + inputs (with
each pair styled as a unit) can still align the individual elements in a
greater grid. Potential issues:
4EE8
<ul>
<li> If an item is positioned outside the subgrid's declared
rows/columns, does the subgrid expand further into the outer grid, or
just overflow within its declared bounds?
<li> How to declare a subgrid? As a separate display type, as illustrated
here, or by assigning a "subgrid" value to grid-definition-rows/columns
(which would allow aligning to the parent grid in only one dimension)?
<li> Can auto-placement in the subgrid determine/increase the size of the
subgrid?
<li> Should you be able to interleave lines from the parent grid with
subgrid lines?
</ul>
</div>
<p> A <a href="#grid-item"><i>grid item</i></a> can itself be a <a
href="#grid-container"><i>grid container</i></a> by giving it ‘<code
class=css>display: grid</code>’; in this case the layout of its contents
will be independent of the layout of the grid it participates in.
<p> In some cases it might be necessary for the contents of multiple <a
href="#grid-item"><i>grid items</i></a> to align to each other; in this
case ‘<code class=css>display: subgrid</code>’ can be used. A <a
href="#grid-item"><i>grid item</i></a> with ‘<code class=css>display:
subgrid</code>’ behaves just like one with ‘<code class=css>display:
grid</code>’ except that:
<ul>
View remainder of file in raw view