Propiedad CSS grid-template-rows
Ejemplo
Especifique el tamaño de fila (altura):
.grid-container {
display: grid;
grid-template-rows:
100px 300px;
}
Definición y uso
La grid-template-rows
propiedad especifica el número (y las alturas) de las filas en un diseño de cuadrícula.
Los valores son una lista separada por espacios, donde cada valor especifica la altura de la fila respectiva.
Valor por defecto: | ninguna |
---|---|
Heredado: | No |
Animable: | si. Leer sobre animable |
Versión: | Módulo de diseño de cuadrícula CSS Nivel 1 |
Sintaxis de JavaScript: | objeto .style.gridTemplateRows="50px 200px" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
grid-template-rows | 57 | 16 | 52 | 10 | 44 |
Sintaxis CSS
grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
none | No size is set. Rows are created if needed | |
auto | The size of the rows is determined by the size of the container, and on the size of the content of the items in the row | |
max-content | Sets the size of each row to depend on the largest item in the row | |
min-content | Sets the size of each row to depend on the smallest item in the row | |
length | Sets the size of the rows, by using a legal length value. Read about length units |
páginas relacionadas
Tutorial de CSS: diseño de cuadrícula CSS
Referencia CSS: la propiedad grid-columns
Referencia de CSS: la propiedad grid-template