Export (0) Print
Expand All

-ms-grid-rows property

Gets or sets one or more values that specify the height of each grid row within the object.

This property is read/write.

CSS Grid Layout, Section 5Internet Explorer 10

 

Syntax

-ms-grid-rows: [ auto | height | min-content | max-content | minmax(min, max) ] + | none

Property values

One or more row widths, separated by spaces.

auto

The height of a row is computed based on the tallest child element in that column. This keyword is equivalent to minmax(min-content, max-content).

height

The height of each row specified as one of the following values:

  • A length consisting of an integer number, followed by an absolute units designator ("cm", "mm", "in", "pt", or "pc") or a relative units designator ("em", "ex", or "px").
  • A percentage of the object height.
  • A proportion of the remaining vertical space (that is, the object height, less the combined heights of other tracks), consisting of an integer number followed by a fractional designator ("fr"). For example, if "200px 1fr 2fr" is specified, the first row is allocated 200 pixels, and the second and third rows are allocated 1/3 and 2/3 of the remaining height, respectively.
min-content

The minimum height of any child elements is used as the height of the row.

max-content

The maximum height of any child elements is used as the height of the row.

minmax(min, max)

The height of the row is between min and max, as available space allows. The min and max parameters can be any other value of the -ms-grid-rows property, except for auto.

none

Initial value. The object has no specified rows. Implicit, auto-sized rows will still be created based on the grid position(s) of the child element(s).

CSS information

Applies Tonon-replaced block elements
Mediavisual paged
Inheritedno
Initial Valueauto

Standards information

Remarks

This property also supports a repeating syntax. If there are a large number of rows that are the same or exhibit a recurring pattern, a repeat syntax can be applied to define the rows in a more compact form. The repeated values are enclosed by parentheses, and are followed by an integer within brackets (for instance, [4]) that indicates how many times to repeat the values in parentheses. See Examples for a demonstration.

When space is allocated to a row, priority is given to those rows that have their height specified as a length or as a percentage. Any remaining space is then allocated to those rows that have their height specified as a proportion.

Each distance value defines a row that can be referred to by a number that corresponds to its position in the list. The first distance value specified defines a row 1, the second 2, and so on.

Child elements are clipped if they are too large to fit in the allocated space.

Examples

The following two examples illustrate the repeating -ms-grid-rows syntax. They are equivalent. There is a single column, and a pattern of four repeated rows: a 250px row followed by a 10px gutter.


<style type="text/css">
  #grid {
    display: -ms-grid;
    -ms-grid-rows: 10px 250px 10px 250px 10px 250px 10px 250px 10px;
    -ms-grid-columns: 1fr;
  }	

  /* Equivalent definition. */
  #grid {
    display: -ms-grid;
    -ms-grid-rows: 10px (250px 10px)[4];
    -ms-grid-columns: 1fr;
  }
</style>

See also

a
abbr
acronym
address
b
bdo
big
blockQuote
br
button
cite
code
CSSStyleDeclaration
currentStyle
dd
del
dfn
div
dl
dt
em
fieldSet
form
i
img
input
ins
kbd
label
li
map
noFrames
noScript
object
ol
p
pre
q
samp
script
select
small
span
strong
style
sub
sup
table
tBody
td
textArea
tFoot
th
tHead
tr
tt
ul
var
-ms-grid-row

 

 

Show:
© 2014 Microsoft