8000 csswg-drafts/css-grid/Overview.src.html at 200a90d2e27df22230bf613031b95566d6236ac1 · simonwuelker/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
2780 lines (2280 loc) · 111 KB

Overview.src.html

File metadata and controls

2780 lines (2280 loc) · 111 KB
The <dfn value for="grid-template-rows grid-template-columns">none</dfn> value indicates that there is no <a>explicit grid</a>;
any rows/columns will be implicitly generated,
and their size will be determined by the 'grid-auto-rows' and 'grid-auto-columns' properties.
<p>
The <dfn value for="grid-template-rows grid-template-columns">subgrid</dfn> value indicates that the grid will align to its parent grid in that axis.
Rather than specifying the sizes of rows/columns explicitly,
they'll be taken from the parent grid's definition.
If the <a>grid container</a> is not a <a>grid item</a>,
this value computes to <a value for=grid-template-rows>none</a>.
See the <a href="#subgrids">Subgrids</a> section for more detail.
<div class='example'>
<p>
Given the following 'grid-template-columns' declaration:
<pre>grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);</pre>
<p>
Five grid lines are created:
<ol>
<li>
At the start edge of the <a>grid container</a>.
<li>
100px from the start edge of the <a>grid container</a>.
<li>
A distance from the previous line equal to half the <a>free space</a>
(the width of the <a>grid container</a>, minus the width of the non-flexible <a>grid tracks</a>).
<li>
A distance from the previous line equal to the maximum size of any <a>grid items</a>
belonging to the column between these two lines.
<li>
A distance from the previous line at least as large as the largest minimum size of any <a>grid items</a>
belonging to the column between these two lines,
but no larger than the other half of the <a>free space</a>.
</ol>
<p>
If the non-flexible sizes
(''100px'', ''max-content'', and ''min-content'')
sum to larger than the <a>grid container</a>’s width,
the final <a>grid line</a> will be a distance equal to their sum away from the start edge of the <a>grid container</a>
(the ''1fr'' sizes both resolve to ''0'').
If the sum is less than the <a>grid container</a>’s width,
the final <a>grid line</a> will be exactly at the end edge of the <a>grid container</a>.
This is true in general whenever there's at least one <<flex>> value among the <a>grid track</a> sizes.
</div>
<div class='example'>
<p>
Additional examples of valid <a>grid track</a> definitions:
<pre>
/* examples of valid track definitions */
grid-template-rows: 1fr minmax(min-content, 1fr);
grid-template-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr));
grid-template-rows: calc(4em - 5px)</pre>
</div>
<h4 id='named-lines'>
Named Grid Lines: the ''(<<ident>>*)'' syntax</h4>
<p>
While <a>grid lines</a> can always be referred to by their numerical index,
<dfn export title="named line">named lines</dfn>
can make the <a>grid-placement properties</a> easier to understand and maintain.
Lines can be explicitly named in the 'grid-template-rows' and 'grid-template-columns' properties,
or <a href="#implicit-named-lines">implicitly named</a> by creating <a>named grid areas</a> with the 'grid-template-areas' property.
<div class='example'>
<p>
For example,
the following code gives meaningful names to all of the lines in the grid.
Note that some of the lines have multiple names.
<pre>&lt;style>
#grid {
display: grid;
grid-template-columns: (first nav) 150px (main) 1fr (last);
grid-template-rows: (first header) 50px (main) 1fr (footer) 50px (last);
}
&lt;/style></pre>
<div class="figure">
<img class="figure" alt="Image: Named Grid Lines." src="images/grid-named-lines.png" />
<p class="caption">Named Grid Lines.
</div>
</div>
<h4 id='repeat-notation'>
Repeating Rows and Columns: the ''repeat()'' notation</h4>
<p>
The ''repeat()'' notation represents a repeated fragment of the <a>track list</a>.
This is just a syntactic shorthand that allows writing a large number of columns or rows that exhibit a recurring pattern in a more compact form.
The syntax of the ''repeat()'' notation is:
<pre class='prod'><dfn>repeat()</dfn> = repeat( <<positive-integer>> , [ <<line-names>>? <<track-size>> ]+ <<line-names>>? )</pre>
<p>
The first argument specifies the number of repetitions.
The second argument is a <a>track list</a>,
which is repeated that number of times.
The ''repeat()'' notation cannot be nested;
doing so makes the declaration invalid.
<div class='example'>
<p>
This example shows two equivalent ways of writing the same grid definition.
Both ways produce a grid with a single row and four "main" columns, each 250px wide,
surrounded by 10px "gutter" columns.
<pre>
&lt;style>
#grid {
display: grid;
grid-template-columns: 10px (col-start) 250px (col-end)
10px (col-start) 250px (col-end)
10px (col-start) 250px (col-end)
10px (col-start) 250px (col-end) 10px;
grid-template-rows: 1fr;
}
/* Equivalent definition. */
#grid {
display: grid;
grid-template-columns: repeat(4, 10px (col-start) 250px (col-end)) 10px;
grid-template-rows: 1fr;
}
&lt;/style></pre>
</div>
<h4 id='fr-unit'>
Flexible Lengths: the ''fr'' unit</h4>
<p>
A <dfn export>flexible length</dfn> or <dfn><<flex>></dfn> is a dimension with the ''fr'' unit,
which represents a fraction of the <a>free space</a> in the <a>grid container</a>.
<p>
The distribution of <a>free space</a> occurs after all non-flexible <a>sizing functions</a> have reached their maximum.
The total size of such rows or columns is subtracted from the available space, yielding the <dfn export>free space</dfn>,
which is then divided among the flex-sized rows and columns in proportion to their flex factor.
<p class='note'>
Flexible lengths in a <a>track list</a> work similarly to flexible lengths with a zero base size in [[CSS3-FLEXBOX]].
<p>
Each column or row's share of the <a>free space</a> can be computed as the column or row's
<code>&lt;flex> * &lt;free space> / &lt;sum of all flex factors></code>.
For the purpose of this calculation,
a flexible length in the <var>min</var> position of a ''minmax()'' function is treated as ''0'' (an inflexible length).
<p>
When the available space is infinite
(which happens when the <a>grid container</a>’s width or height is <a>indefinite</a>),
flex-sized <a>grid tracks</a> are sized to their contents while retaining their respective proportions.
The used size of each flex-sized <a>grid track</a> is computed by
determining the ''max-content'' size of each flex-sized <a>grid track</a>
and dividing that size by the respective flex factor
to determine a <dfn export>hypothetical 1fr size</dfn>.
The maximum of those is used as the ''1fr'' length,
which is then multiplied by each <a>grid track</a>’s flex factor to determine its final size.
<h4 id="subgrids">
Subgrids: the <a value>subgrid</a> keyword</h4>
<p>
A <a>grid item</a> can itself be a <a>grid container</a> by giving it ''display: grid'';
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>grid items</a> to align to each other.
A <a>grid container</a> that is itself a <a>grid item</a>
can defer the definition of its rows or columns to its parent <a>grid container</a>
by using the <a value>subgrid</a> keyword in 'grid-template-rows' and/or 'grid-template-columns',
making it a <dfn export>subgrid</dfn> in that dimension.
View remainder of file in raw view