-ms-grid-columns 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.

0 out of 1 rated this helpful - Rate this topic

Gets or sets one or more values that specify the width of each grid column within the object.

This property is read/write.

Syntax

Property values

One or more column widths, separated by spaces.

auto

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

width

The width of each column 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 width.
A proportion of the remaining horizontal space (that is, the object width, less the combined widths of other tracks), consisting of an integer number followed by a fractional designator ("fr"). For example, if "200px 1fr 2fr" is specified, the first column is allocated 200 pixels, and the second and third columns are allocated 1/3 and 2/3 of the remaining width, respectively.

min-content

The minimum width of any child elements is used as the width of the column.

max-content

The maximum width of any child elements is used as the width of the column.

minmax(min, max)

The width 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-columns property, except for auto.

none

Initial value. The object has no specified columns. Implicit, auto-sized columns 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 columns that are the same or exhibit a recurring pattern, a repeat syntax can be applied to define the columns 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 column, priority is given to those columns that have their width specified as a length or as a percentage. Any remaining space is then allocated to those columns that have their width specified as a proportion.

Each distance value defines a column that can be referred to by a number that corresponds to its position in the list. The first distance value specified defines a column 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-columns syntax. They are equivalent. There is a single row, and a pattern of four repeated columns: a 250px column followed by a 10px gutter.

CSS


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

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

-ms-grid-columns property