La propiedad grid-auto-rows en CSS se usa para especificar el tamaño de las filas de los contenedores grid generados implícitamente.
Sintaxis:
grid-auto-rows: auto|max-content|min-content|length| percentage|minmax(min, max)|initial|inherit;
Valores de propiedad:
- automático: este es el valor predeterminado. El tamaño se determina implícitamente según el tamaño del contenedor.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-auto-rows Property
</title>
<style>
.main {
display: grid;
grid-template-areas: "a a";
grid-gap: 20px;
padding: 30px;
background-color: green;
grid-auto-rows: auto;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">1</div>
<div class = "GFG">2</div>
<div class = "GFG">3</div>
<div class = "GFG">4</div>
<div class = "GFG">5</div>
</div>
</body>
</html>
Producción:
- longitud: se utiliza para establecer la propiedad grid-auto-rows en una longitud determinada. El valor de longitud no puede ser negativo.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-auto-rows Property
</title>
<style>
.main {
display: grid;
grid-template-areas: "a a";
grid-gap: 20px;
padding: 30px;
background-color: green;
grid-auto-rows: 3.5cm;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">1</div>
<div class = "GFG">2</div>
<div class = "GFG">3</div>
<div class = "GFG">4</div>
<div class = "GFG">5</div>
</div>
</body>
</html>
Producción:
- porcentaje: Establece la propiedad grid-auto-rows en valor porcentual.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-auto-rows Property
</title>
<style>
.main {
display: grid;
grid-template-areas: "a a";
grid-gap: 20px;
padding: 30px;
background-color: green;
grid-auto-rows: 30%;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">1</div>
<div class = "GFG">2</div>
<div class = "GFG">3</div>
<div class = "GFG">4</div>
<div class = "GFG">5</div>
</div>
</body>
</html>
Producción:
- max-content: especifica el tamaño según el elemento más grande del contenedor.
- min-content: especifica el tamaño en función del elemento más pequeño del contenedor.
- minmax(min, max): Especifica el tamaño en el rango de [min, max]. mayor o igual a min y menor o igual a max.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-auto-rows Property
</title>
<style>
.main {
display: grid;
grid-template-areas: "a a";
grid-gap: 20px;
padding: 30px;
background-color: green;
grid-auto-rows: minmax(100px, 3.5cm);
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">1</div>
<div class = "GFG">2</div>
<div class = "GFG">3</div>
<div class = "GFG">4</div>
<div class = "GFG">5</div>
</div>
</body>
</html>
Producción:
- initial: Inicializa el valor con su valor predeterminado.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-auto-rows Property
</title>
<style>
.main {
display: grid;
grid-template-areas: "a a";
grid-gap: 20px;
padding: 30px;
background-color: green;
grid-auto-rows: initial;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">1</div>
<div class = "GFG">2</div>
<div class = "GFG">3</div>
<div class = "GFG">4</div>
<div class = "GFG">5</div>
</div>
</body>
</html>
Producción:
- heredar: Hereda el valor de su elemento padre.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-auto-rows Property
</title>
<style>
.container {
grid-auto-rows: 80px;
}
.main {
display: grid;
grid-template-areas: "a a";
grid-gap: 20px;
padding: 30px;
background-color: green;
grid-auto-rows: inherit;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
</style>
</head>
<body>
<div class = "container">
<div class = "main">
<div class = "GFG">1</div>
<div class = "GFG">2</div>
<div class = "GFG">3</div>
<div class = "GFG">4</div>
<div class = "GFG">5</div>
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad grid-auto-rows se enumeran a continuación:
- cromo 57.0
- Borde 16.0
- Firefox 70.0
- Internet Explorer 10.0
- Safari 10.1
- Ópera 44.0
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA