CSS | propiedad grid-template-rows

La propiedad grid-template-rows en CSS se usa para establecer el número de filas y la altura de las filas en una cuadrícula. Los valores de grid-template-rows están separados por espacios, donde cada valor representa la altura de la fila.

Sintaxis:

grid-template-rows: none|auto|max-content|min-content|length|
initial|inherit;

Valores de propiedad:

none: no establece la altura de la propiedad grid-template-row. Crea una fila cuando es necesario.
Sintaxis:
```
grid-template-rows: none;
```
auto: se utiliza para establecer el tamaño de la fila automáticamente, es decir, depende del tamaño del contenedor y del contenido de la fila.
Sintaxis:
```
grid-template-rows: auto;
```
max-content: Representa el contenido máximo de los ítems presentes en la grilla.
```
grid-template-rows: max-content;
```
min-content: Representa el contenido mínimo de los ítems presentes en la grilla.
```
grid-template-rows: min-content;
```
longitud: el tamaño de la fila se establece de acuerdo con la longitud especificada.
```
grid-template-rows: length;
```

Ejemplo 1:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS grid-template-rows Property 
        </title> 
          
        <style> 
            .geeks { 
                background-color:green; 
                padding:30px; 
                display: grid; 
                grid-template-columns: auto auto auto auto;
                grid-template-rows: auto auto;
                grid-gap: 10px; 
            } 
            .GFG { 
                background-color: white; 
                border: 1px solid white; 
                font-size: 30px; 
                text-align: center; 
            } 
        </style> 
    </head> 
      
    <body> 
        <div class="geeks"> 
            <div class="GFG">A</div> 
            <div class="GFG">B</div> 
            <div class="GFG">C</div> 
            <div class="GFG">D</div> 
            <div class="GFG">E</div> 
            <div class="GFG">F</div> 
            <div class="GFG">G</div> 
            <div class="GFG">H</div> 
        </div> 
    </body> 
</html>                     

Producción:

Ejemplo 2:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS grid-template-rows Property 
        </title> 
          
        <style> 
            .geeks { 
                background-color:green; 
                padding:30px; 
                display: grid; 
                grid-template-columns: auto auto auto auto;
                grid-template-rows: auto 150px ;
                grid-gap: 10px; 
            } 
            .GFG { 
                background-color: white; 
                border: 1px solid white; 
                font-size: 30px; 
                text-align: center; 
            } 
        </style> 
    </head> 
      
    <body> 
        <div class="geeks"> 
            <div class="GFG">A</div> 
            <div class="GFG">B</div> 
            <div class="GFG">C</div> 
            <div class="GFG">D</div> 
            <div class="GFG">E</div> 
            <div class="GFG">F</div> 
            <div class="GFG">G</div> 
            <div class="GFG">H</div> 
        </div> 
    </body> 
</html>                     

Producción:

Navegadores compatibles: los navegadores compatibles con la propiedad grid-template-rows se enumeran a continuación:

Google Chrome 57.0
Borde 16.0
Firefox 52.0
Internet Explorer 10.0
Safari 10.1
Ópera 44.0

Publicación traducida automáticamente

Artículo escrito por AkshayGulati y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta