-ms-grid-rows property (Internet Explorer)

The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

This topic has not yet been rated - Rate this topic

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

This property is read/write.

Syntax

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 To	non-replaced block elements
Media	visual paged
Inherited	no
Initial Value	auto

Standards information

CSS Grid Layout, Section 5

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.

CSS


<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>

-ms-grid-rows property