8000 csswg-drafts/css-template/new2.src.html at 66b314ab1e5b93eab88799bbad56bff2549ed8ed · xfq/csswg-drafts · GitHub
Skip to content

new2.src.html

Latest commit

 

History

History
4147 lines (3266 loc) · 135 KB

new2.src.html

File metadata and controls

4147 lines (3266 loc) · 135 KB
<p>and
<pre>DIV {
grid-template: "****" "****" "****";
grid-rows: 10em 10em 10em;
grid=columns: * * * * }
</pre>
</div>
<h3 id=grid-column-sizes> Specifying the widths of columns:
'grid-columns'</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn>grid-columns</dfn>
<tr>
<th><a href="#values" >Value</a>:
<td>auto | <var>&lt;col-width&gt;</var>+
<tr>
<th>Initial:
<td>auto
<tr>
<th>Applies to:
<td><span>block container</span> elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Animatable:
<td>yes, between grids with the same number of tracks
<tr>
<th>Percentages:
<td>N/A
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed&nbsp;value:
<td>specified value
<tr>
<th>Canonical order:
<td><abbr title="follows order of property value definition">per
grammar</abbr>
</table>
<p>The 'grid-columns' property specifies the sizes of the columns of
a grid.
<p>Where
<pre class=prod>
<dfn>&lt;col-width&gt;</dfn> = <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
<var>&lt;minmax&gt;</var> | min-content | max-content | auto
<dfn>&lt;minmax&gt;</dfn> = minmax( <var>&lt;col-width&gt;</var> , <var>&lt;col-width&gt;</var> )</pre>
<p class=issue>The definition of minmax isn't correct, it should only
accepts certain values.
<p>Each <var>&lt;col-width&gt;</var> sets the width of a column, the
first value for the first column, the second for the second columns,
etc.
<p>If there are fewer <var>&lt;col-width&gt;</var> values than
the <span>number of columns</span> in the element, or if the value is
''auto'', the missing columns widths are all '*'.
<p>Each <var>&lt;col-width&gt;</var> can be one of the following:
<dl>
<dt><var>&lt;length&gt;</var>
<dd>
An explicit width for that column. Negative values are illegal.
<dt><var>&lt;fraction&gt;</var>
<dd>
(A non-negative number followed by ''fr''.) A fraction of the
remaining space, see <a href="#fraction-values-fr" >Fraction
values</a> below.
<dt>*
<dd>
(Asterisk.) All columns with a width of '*' have the same width.
<dt><var>&lt;percentage&gt;</var>
<dd>
Expresses a size as a percentage of the element's a-priori
content width. <span class=issue>When the width of the <span>grid
element</span> is dependent on content, the result is
undefined.</span>
<dt>max-content
<dt>min-content
<dd>
The column's width is determined by its contents. See
the <a href="#slot-sizes" >algorithm</a> below.
<dt>minmax(<var>p</var>,<var>q</var>)
<dd>
The column's width is constrained to be greater than or equal
to <var>p</var> and less than or equal to <var>q</var>. <var>p</var>
and <var>q</var> stand for [ <var>&lt;length&gt;</var> | max-content |
min-content | * ]. There may be white space around the <var>p</var>
and <var>q</var>. If <var>q</var> &lt; <var>p</var>, then <var>q</var>
is ignored and ''minmax(<var>p</var>,<var>q</var>)'' is treated as
'minmax(<var>p</var>,<var>p</var>)'.
<dt>auto
<dd>
Equivalent to 'minmax(min-content, max-content)'.
</dl>
<!--=================================================================-->
<h3 id=grid-row-sizes> Specifying the height of rows: 'grid-rows'</h3>
View remainder of file in raw view