grid-template-rows
==================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
A propriedade **`grid-template-rows`** do CSS define o nome das linhas e funções de dimensionamento (track sizing) do grid rows (en-US).

Experimente
-----------

Syntax
------


```css
/\* 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` (en-US) .

`<length>` (en-US)

É um comprimento não negativo.

`<percentagem>` (en-US)

 É um valor de `<percentagem>` (en-US) 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>` (en-US)

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)` (en-US)

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` (en-US)/`min-height`) of the grid items occupying the grid track.

**Nota:**: `auto` track sizes (and only `auto` track sizes) can be stretched by the `align-content` and `justify-content` (en-US) properties.

`fit-content( [ <length> | <percentage> ] )` (en-US)

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> )` (en-US)

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

grid-template-rows =   
  none                       | (en-US)  
  <track-list>               | (en-US)  
  <auto-track-list>          | (en-US)  
  subgrid <line-name-list>? (en-US)    
  
<track-list> =   
  [ (en-US) <line-names>? (en-US) [ (en-US) <track-size> | (en-US) <track-repeat> ] (en-US) ] (en-US)+ (en-US) <line-names>? (en-US)    
  
<auto-track-list> =   
  [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US) <auto-repeat> [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US)    
  
<line-name-list> =   
  [ (en-US) <line-names> | (en-US) <name-repeat> ] (en-US)+ (en-US)    
  
<line-names> =   
  '[' <custom-ident> (en-US)\* (en-US) ']'    
  
<track-size> =   
  <track-breadth>                                   | (en-US)  
  minmax( <inflexible-breadth> , <track-breadth> )  | (en-US)  
  fit-content( <length-percentage [0,∞]> )            
  
<track-repeat> =   
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <track-size> ] (en-US)+ (en-US) <line-names>? (en-US) )    
  
<fixed-size> =   
  <fixed-breadth>                                   | (en-US)  
  minmax( <fixed-breadth> , <track-breadth> )       | (en-US)  
  minmax( <inflexible-breadth> , <fixed-breadth> )    
  
<fixed-repeat> =   
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )    
  
<auto-repeat> =   
  repeat( [ (en-US) auto-fill | (en-US) auto-fit ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )    
  
<name-repeat> =   
  repeat( [ (en-US) <integer [1,∞]> | (en-US) auto-fill ] (en-US) , <line-names>+ (en-US) )    
  
<track-breadth> =   
  <length-percentage [0,∞]>  | (en-US)  
  <flex [0,∞]>               | (en-US)  
  min-content                | (en-US)  
  max-content                | (en-US)  
  auto                         
  
<inflexible-breadth> =   
  <length-percentage [0,∞]>  | (en-US)  
  min-content                | (en-US)  
  max-content                | (en-US)  
  auto                         
  
<length-percentage> =   
  <length> (en-US)      | (en-US)  
  <percentage> (en-US)    
  
<fixed-breadth> =   
  <length-percentage [0,∞]>    
  
```

Examples
--------

### CSS


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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

### HTML


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

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | grid containers |
| Inherited | não |
| Percentages | refer to corresponding dimension of the content area |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related CSS properties: `grid-template-columns`, `grid-template-areas` (en-US), `grid-template` (en-US)
* Grid Layout Guide: *Basic concepts of grid layout - Grid Tracks*
* Video tutorial: *Defining a Grid*

1. **CSS**
2. **CSS Reference**
3. CSS Grid Layout
4. **Guides**
    1. Basics concepts of grid layout
    2. Relationship to other layout methods
    3. Line-based placement (en-US)
    4. Grid template areas (en-US)
    5. Layout using named grid lines (en-US)
    6. Auto-placement in grid layout (en-US)
    7. Box alignment in grid layout (en-US)
    8. Grids, logical values and writing modes (en-US)
    9. CSS Grid Layout and Accessibility (en-US)
    10. CSS Grid Layout and Progressive Enhancement (en-US)
    11. Realizing common layouts using grids (en-US)
5. **Properties**
    1. grid
    2. grid-area (en-US)
    3. grid-auto-columns (en-US)
    4. grid-auto-flow
    5. grid-auto-rows (en-US)
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap (en-US)
    9. grid-column-start (en-US)
    10. grid-gap (en-US)
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas (en-US)
    17. grid-template-columns
    18. grid-template-rows
6. **Glossary**
    1. Grid lines (en-US)
    2. Grid tracks (en-US)
    3. Grid cell (en-US)
    4. Grid areas
    5. Gutters (en-US)
    6. Grid row (en-US)
    7. Grid column (en-US)