EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

-ms-grid-columns property

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

This property is read/write.

CSS Grid Layout, Section 5

Syntax

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

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


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

See also

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

 

 

Afficher:
© 2014 Microsoft