Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A propriedade grid-template-rows do CSS define o nome das linhas e funções de dimensionamento (track sizing) do grid rows.

Syntax

/* Keyword value */
grid-template-rows: none;

/* <track-list> values */
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);

/* <auto-track-list> values */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-rows: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-rows: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* Valores globais */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;

Esta propriedade pode ser especificada como:

  • com a palavra-chave none
  • ou um valor <track-list> 
  • ou um valor <auto-track-list> 

Valores

none
É uma palavra-chave que indica que não há uma grid explícita. Qualquer linha irá ser implicitamente gerada e seu tamanho será determinado pela a propriedade grid-auto-rows .
<length>
É um comprimento não negativo.
<percentagem>
É um valor de <percentagem> não negativo, relativo ao tamanho do bloco do grid contêiner. Se o tamanho do grid contêiner depender do tamanho de suas tracks, então a percentagem deve ser tratada como auto
As contribuições de tamanho inerentes da track podem ser ajustados ao tamanho do grid contêiner, e aumentar o tamanho final da track pelo o valor mínimo que respeitará a percentagem.
<flex>
Is a non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)).
max-content
Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.
min-content
Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.
minmax(min, max)
Is a functional notation that defines a size range, greater than or equal to min, and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. As a maximum, a <flex> value sets the track’s flex factor. It is invalid as a minimum.
auto
Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

Note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.

fit-content( [ <length> | <percentage> ] )
Represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.

Formal syntax

none | <track-list> | <auto-track-list>

where
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

where
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>

where
<length-percentage> = <length> | <percentage>

Examples

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

Result

Specifications

Specification Status Comment
CSS Grid Layout
The definition of 'grid-template-rows' in that specification.
Candidata a Recomendação Initial definition

Initial valuenone
Aplica-se agrid containers
Inheritednão
Percentagesrefer to corresponding dimension of the content area
Midiavisual
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

57

291

16

52

402

No

44

283

10.1
minmax()

57

291

12

52

402

?

44

283

10.1
repeat()

57

Yes4

16

525

Yes6

No

44

Yes7

10.1
fit-content()291651 No4410.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support57

57

291

16

52

402

4410.36.0
minmax() No ?12

52

402

No10.3 ?
repeat() ? ? No

525

Yes6

?10.3 ?
fit-content()575716514410.37.0

1. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

2. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Enable experimental Web Platform features preference.

4. This feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

5. calc() doesn't work in repeat() (see bug 1350069).

6. This feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

7. This feature is behind the Enable experimental Web Platform features preference.

 

See also

Etiquetas do documento e colaboradores

Colaboradores desta página: marcosdourado
Última atualização por: marcosdourado,