La propiedad grid-row-end en CSS se usa para definir la posición final de los elementos de la cuadrícula dentro de una fila de la cuadrícula especificando el borde en línea de su área de cuadrícula.
Sintaxis:
grid-row-end: value;
Valor por defecto:
- auto
Valores de propiedad:
- auto: los elementos de la cuadrícula abarcan el valor predeterminado de una fila.
- span int: especifica el número de filas que abarcará el elemento.
- entero: Especifica la fila en la que termina el artículo.
- initial: establece la propiedad grid-row-end en su valor predeterminado.
- heredar: la propiedad grid-row-end se hereda de su padre.
Nota: No inicialice la altura y el ancho de los elementos del contenedor de forma explícita. Si se inicializa, no se puede observar el efecto de intervalo.
Ejemplo 1: este ejemplo describe los elementos del contenedor sin la propiedad grid-row-end.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-end Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
padding: 30px;
background-color: green;
}
.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:
Ejemplo 2: este ejemplo describe los elementos del contenedor con la propiedad grid-row-end: span n .
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-end Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
.Geeks1 {
grid-row-end: span 2;
}
</style>
</head>
<body>
<div class = "main">
<div class = "Geeks1 GFG">1</div>
<div class = "Geeks2 GFG">2</div>
<div class = "Geeks3 GFG">3</div>
<div class = "Geeks4 GFG">4</div>
<div class = "Geeks5 GFG">5</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad grid-row-end se enumeran a continuación:
- Google Chrome 57.0 y superior
- Borde 16.0 y superior
- Firefox 52.0 y superior
- Safari 10.1 y superior
- Ópera 44.0 y superior
- Internet Explorer no es compatible
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA