La propiedad grid-row-start en CSS se usa para definir la posición de inicio de los elementos de la cuadrícula dentro de la fila de la cuadrícula especificando el borde de inicio en línea de su área de cuadrícula.
Sintaxis:
grid-row-start: auto|span|row-line|initial|inherit;
Valor por defecto:
- auto
Valores de propiedad:
- auto: establece la propiedad grid-row-start en su valor predeterminado de una fila.
- span: especifica el número de filas que abarcará el elemento.
- integer(row-line): Especifica la fila en la que comienza el elemento.
- initial: establece la propiedad grid-row-start en su valor predeterminado.
- heredar: la propiedad grid-row-start 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 span.
Ejemplo 1: este ejemplo describe los elementos del contenedor sin la propiedad grid-row-start.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start 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 la propiedad grid-row-start en auto.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start 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;
}
.Geeks3 {
grid-row-start: auto;
</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:
Ejemplo 3: este ejemplo describe la propiedad grid-row-start para abarcar.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start 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;
}
.Geeks3 {
grid-row-start: 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:
Ejemplo 4: Este ejemplo describe la propiedad grid-row-start de la línea de fila.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start 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;
}
.Geeks3 {
grid-row-start: 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:
Ejemplo 5: este ejemplo describe la propiedad grid-row-start para initial.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start 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;
}
.Geeks3 {
grid-row-start: initial;
</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:
Ejemplo 6: Este ejemplo describe la propiedad grid-row-start para heredar.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start 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;
}
.Geeks3 {
grid-row-start: inherit;
</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-start se enumeran a continuación
- Google Chrome 57.0
- Borde 16.0
- Firefox 52.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