Los grid-row-start
La propiedad CSS es parte de la Especificación de diseño de cuadrícula CSSse utiliza para indicar la línea de cuadrícula de fila donde comienza un elemento de cuadrícula en el diseño de cuadrícula. Esta propiedad, entre otras propiedades de cuadrícula para la ubicación basada en líneas, controla el tamaño de un elemento de cuadrícula y dónde se ubica en la cuadrícula.
.grid-container {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr;
}
.grid-item:nth-child(2) {
grid-row-start: 2; /* Item starts on the second row line */
}
Según el comportamiento de colocación automática predeterminado de CSS Grid, el segundo elemento de cuadrícula secundario en este ejemplo debe colocarse en la primera fila y la segunda columna. Pero declaramos un grid-row-start
posición en la línea de cuadrícula de la segunda fila moviendo el elemento de cuadrícula a la segunda fila y alineando su borde inicial con la línea de cuadrícula de la segunda fila.
grid-row-start
Propiedad CSS.Sintaxis
grid-row-start: <grid-line>
where
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
- Valor inicial:
auto
- Se refiere a: elementos de red y cajas absolutamente posicionadas cuyo bloque contenedor es un contenedor de red
- Heredado: no
- Valor calculado: Como se indica
- Tipo de animación: discreto discreto
Valores
/* Keyword value */
grid-row-start: auto;
/* <custom-ident> value */
grid-row-start: myLineName;
grid-row-start: myGridArea;
/* <integer> + <custom-ident> values */
grid-row-start: 3;
grid-row-start: -2;
grid-row-start: main-area 2;
grid-row-start: 3 product-start;
/* span + <integer> + <custom-ident> values */
grid-row-start: span 3;
grid-row-start: span main;
grid-row-start: span myarea 5;
/* Global values */
grid-row-start: inherit;
grid-row-start: initial; /* same as `auto` */
grid-row-start: revert;
grid-row-start: revert-layer;
grid-row-start: unset;
auto
Está defecto Muestra el rango predeterminado (1
) y el comportamiento de ubicación automática, lo que significa que el elemento de cuadrícula se coloca automáticamente en la siguiente celda de cuadrícula vacía disponible.
<custom-ident>
Esta sintaxis le permite utilizar un entero para referirse a una línea de red numerada o a una una cuerda para hacer referencia a una línea de red con nombre o un área de red con nombre. En otras palabras, puede especificar una línea de red por su índice digital o nombre hasta el borde inicial de un elemento de malla.
Posicionamiento de elementos por número de línea
Hay dos líneas de cuadrícula antes y después de cada pista de cuadrícula con un índice numérico asignado automáticamente que comienza en el número uno.
En el primer ejemplo de este artículo, usamos esta sintaxis para especificar la segunda línea de la cuadrícula por su índice (2
) para alinear el borde de inicio del elemento de cuadrícula con el borde de inicio de la segunda fila usando <custom-ident>
sintaxis:
.grid-item:nth-child(2) {
grid-row-start: 2;
}
Tenga en cuenta que también puede utilizar un número negativo (p. ej. -1
) para hacer referencia a una línea de cuadrícula, pero recuerde que se cuenta a partir del borde final de la cuadrícula. El siguiente código apunta a la misma línea de cuadrícula del ejemplo anterior, pero cuenta en orden inverso:
.grid-item:nth-child(2) {
grid-row-start: -3; /* same as 2 */
}
Tenga en cuenta que los números enteros negativos se asignan a nuestra cuadrícula, así como los positivos:
grid-row-start
Propiedad CSS.Posicionamiento de elementos por nombres de fila
Puede establecer un nombre de línea de red personalizado usando grid-template-columns
y grid-template-rows
y utilice las propiedades basadas en líneas de la cuadrícula de diseño para hacer referencia a esa línea por su nombre.
Volvamos a nuestro ejemplo y nombremos todas sus líneas en línea como la siguiente declaración:
.grid {
display: grid;
grid-template-rows: [first] 100px [second] 100px [third] 100px [last];
grid-template-columns: 1fr 1fr 1fr;
}
Podemos referirnos a la segunda línea con nuestro nombre personalizado en lugar de su índice:
.grid-item:nth-child(2) {
grid-row-start: second; /* same as index number 2 */
}
Tenga en cuenta que <custom-ident>
No puede tomar span
valor desde entonces span
La palabra clave está reservada para las propiedades de diseño de cuadrícula (p. ej. grid-column: 1 / span 2
).
Posicionamiento de elementos por áreas de cuadrícula
Cuando define zonas de red utilizando el grid-template-areas
obtiene nombres de fila implícitos de forma gratuita en función de los nombres de campo. Por ejemplo, un área de red con el nombre header
generar un nombre de línea header-start
antes y un header-end
Después, puede hacer referencia a estas líneas para establecer la posición de un elemento de cuadrícula.
.grid-item:nth-child(2) {
grid-row-start: header-start;
}
Alternativamente, puede hacer referencia al nombre del campo para colocar un elemento en la línea de inicio de header
área nombrada:
.grid-item:nth-child(2) {
grid-row-start: header;
}
Desde que usas grid-row-start
propiedad en este ejemplo, el navegador entiende que desea header-start
linea de header
área; por lo tanto, alineará el borde de inicio del elemento de cuadrícula con el borde de inicio del área de cuadrícula.
Aquí hay un ejemplo completo:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
body {
display: grid;
grid-template-rows: min-content 1fr min-content;
grid-template-areas:
"header"
"main"
"footer";
}
header {
grid-row-start: header;
}
Esto establece la posición de <header>
elemento a header
área en nuestra red.
<integer> && <custom-ident>?
Esta variedad de sintaxis le permite colocar elementos de la cuadrícula a lo largo de las líneas de la cuadrícula cuando hay nombres repetidos. Si hay líneas de cuadrícula con el mismo nombre, esta sintaxis ayuda a determinar a cuál de esas líneas se está refiriendo.
.grid {
display: grid;
grid-template-rows: [bar] 100px [foo] 100px [bar] 150px [bar];
}
Supongamos que desea seleccionar la tercera fila, pero esa fila tiene el mismo nombre que la primera y la última fila de la cuadrícula; todas se llaman bar
Como en segundo lugar línea con nombre bar
es la tercera línea de la red que puedes usar 2
para seleccionarlo como punto de partida:
.grid-item:nth-child(2) {
grid-row-start: 2 bar; /* The second `bar` named line which is the third line */
}
Tenga en cuenta que el orden no importa, por lo que el código anterior también podría escribirse:
.grid-item:nth-child(2) {
grid-row-start: bar 2;
}
Similar a la sintaxis anterior, puede usar un entero negativo para contar las líneas de la cuadrícula, también comenzando desde el borde final de la cuadrícula.En nuestro ejemplo, si queremos referirnos a la primera bar
podemos contar comenzando desde el borde más externo de nuestra malla y escribirlo así:
.grid-item:nth-child(2) {
grid-row-start: -3 bar;
}
Tenga en cuenta que un valor entero no puede ser nulo.
span && [ <integer> || <custom-ident> ]
Esta sintaxis permite que un elemento de cuadrícula se extienda a lo largo de los rieles de la cuadrícula. Se puede definir de tres maneras diferentes.
Si no se especifica un número entero en ninguna parte de esta sintaxis, el valor predeterminado es 1
.
span <integer>
Usando span
La palabra clave seguida de un número entero indica el número de trazas que un elemento de cuadrícula abarca desde una línea de cuadrícula específica. Por ejemplo, si queremos que un elemento de cuadrícula abarque tres trazas por línea hasta su borde inicial, podemos aplicar el siguiente valor:
.grid-item:nth-child(2) {
grid-row-start: span 3;
}
grid-row-start
Propiedad CSS.cuando usamos span
para colocar la línea de inicio de un elemento, técnicamente, se extiende hacia atrás en lugar de hacia adelante hasta el borde posterior, que suele ser el caso en escenarios del mundo real.
span <custom-ident>
Puedes combinar span
con un nombre de línea de cuadrícula para hacer que el elemento de cuadrícula se expanda hasta que llegue a esa línea de cuadrícula en particular.
.grid-item:nth-child(2) {
grid-row-start: span thirdline;
grid-row-end: 6;
}
Dado que se conoce la fila final del elemento de cuadrícula (6
) podemos abarcar el elemento a la línea de inicio hasta que alcance una línea de cuadrícula con nombre thirdline
.
thirdline
usando grid-row-start
Propiedad CSS.span <custom-ident> <integer>
Si el nombre de la línea de cuadrícula especificada se asigna a más de una línea de cuadrícula, en otras palabras, si tenemos líneas de cuadrícula con nombre repetido, debemos decir a cuáles queremos apuntar. Para hacer esto, podemos agregar un número entero a nuestro valor especificando a qué línea de cuadrícula nos referimos.
Tome la siguiente cuadrícula como ejemplo:
.grid-container {
display: grid;
grid-template-rows: [y] 50px [x] 50px [x] 50px [y] 50px [x] 50px [x];
}
.grid-item:nth-child(2) {
grid-row-start: span x 2;
grid-row-end: 5; /* equivalent to grid-row-end: x 3; */
}
Establecemos la línea final del elemento de cuadrícula en la quinta fila. Luego queremos que se extienda hacia la línea de partida hasta que llegue a una línea de cuadrícula llamada x
Y como queremos que sea esto último x
línea de cuadrícula, terminamos con grid-row-start: span x 2
.
Como resultado, nuestro elemento de malla comienza a extenderse hacia la línea de inicio de la quinta fila, como se ilustra a continuación. La primera línea que golpea se llama y
el siguiente es el primero x
y finalmente, presiona la segunda línea deseada con un nombre x
.
x
línea nombrada hasta el borde inicial del elemento usando el grid-row-start
Propiedad CSS.Esta sintaxis es útil cuando desea limitar un elemento de cuadrícula a una línea de cuadrícula usando su nombre, pero sabe que hay más de una línea de cuadrícula con ese nombre, por lo que agregamos un número entero para decir que queremos N
de esta línea de cuadrícula.
Los elementos de la cuadrícula de posicionamiento pueden generar trazas implícitas
Establecer la posición de un elemento de cuadrícula en el índice de línea de cuadrícula o el nombre de línea de cuadrícula que no existe en una cuadrícula explícita obligará a la cuadrícula a crear trazas implícitas para agregar esa posición a la cuadrícula.
Creemos una cuadrícula con dos filas y establezcamos la posición de su elemento en líneas inexistentes. En el siguiente ejemplo, solo tenemos dos líneas y no hemos nombrado ninguna de nuestras cinturas. Entonces, no hay ninguna fila con un índice de 5
y no hay orden con el nombre de test
pero le ponemos estos valores a nuestras propiedades:
.grid {
display: grid;
grid-template-rows: 100px 100px;
grid-auto-rows: 100px;
}
.grid-item {
grid-row-start: span test;
grid-row-end: 5;
}
Como sabemos que hay rastros implícitos en nuestra malla y queremos que tengan un tamaño para poder verlos, agregamos grid-auto-rows
propiedad de nuestro código.
Ahora que tenemos todo configurado, veamos qué sucede con nuestra red:
Nosotros ponemos grid-row-end
a 5
pero el último índice de nuestra grilla explícita es 3
y por lo tanto se crean dos rastros implícitos hacia el final de la red para darnos una línea con índice de 5
Por otro lado, establecemos grid-row-start
a una línea de red con el nombre de test
Una vez más, dado que no tenemos ese nombre en nuestra red, entonces como queremos que esta línea de cuadrícula se alinee con el borde de inicio de nuestro elemento de cuadrícula, se crea un trazado de fila implícito desde el lado de inicio de la cuadrícula explícita en la dirección del bloque, y su línea es test
.
posicionamiento de los elementos de la cuadrícula puede causar agujeros en el diseño
Como habrás visto en los ejemplos anteriores, el posicionamiento de las líneas puede generar espacios vacíos entre los elementos de la cuadrícula. Puedes evitarlos aplicando grid-auto-flow
propiedad con dense
valor al contenedor de red.
grid-auto-flow
Las propiedades CSS pueden llenar los espacios vacíos causados por el posicionamiento de la línea.Arreglo de elementos de red.
Cuando colocamos elementos en la cuadrícula, podemos apilarlos o superponerlos. Esto nos permite en ocasiones utilizar CSS Grid como alternativa al posicionamiento absoluto. Por ejemplo, podemos colocar una capa de título en una imagen sin usar position
propiedad como se muestra a continuación:
<figure>
<img src="https://css-tricks.com/almanac/properties/g/grid-row-start/image.png" alt="how dare you leave alt empty?">
<figcaption>The caption of our image</figcaption>
</figure>
figure {
display: grid;
}
img,
figcaption {
grid-column-start: 1;
grid-column-end: -1;
grid-row-start: 1;
grid-row-end: -1;
}
Esto es lo que obtenemos:
De forma predeterminada, los elementos de la cuadrícula se organizan en el orden de salida, pero puede controlar su nivel utilizando el z-index
En el siguiente ejemplo, superponemos algunos elementos y usamos z-index
propiedad para mostrar el segundo elemento de nivel superior:
.item:nth-child(2) {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 4;
z-index: 1;
}
z-index
Propiedad CSS.Uso de un índice negativo para una mayor flexibilidad
Hay casos en los que desea un elemento de altura completa en su cuadrícula, lo que significa que comienza en la primera línea de la cuadrícula y termina en la última. Por ejemplo, en una cuadrícula con cuatro líneas, el índice de línea final es 5
para que pueda escribir el código a continuación para tener su artículo de altura completa.
.grid-container {
display: grid;
grid-template-rows: repeat(4, min-content);
}
.grid-item.full-height {
grid-row-start: 1;
grid-row-end: 5;
}
Funciona de maravilla, pero ¿y si el número de filas se cambia a seis? En este caso, necesitamos actualizar el valor del índice para la propiedad de ubicación.
¡La solución flexible es usar el índice negativo!
.grid-item.full-height {
grid-row-start: 1;
grid-row-end: -1;
}
Ahora, no importa cuántas filas tengamos, el elemento de cuadrícula con full-height
la clase siempre abarca la red.
El área nombrada gana a la línea nombrada
Si un área de red con nombre tiene el mismo nombre que un nombre de línea, el algoritmo de ubicación preferirá usar las líneas del área de red con nombre.
Considere el siguiente ejemplo:
.grid {
display: grid;
grid-template-rows: 80px [y] 80px 80px 80px 80px;
grid-template-areas:
"x"
"x"
"x"
"y"
"y";
}
La segunda línea de la red se llama y
y las dos últimas líneas se definen como un área con el mismo nombre. Ahora, para posicionar el primer elemento de malla, asignamos y
como un valor para grid-row-start
Veamos a qué fila se referirá:
.grid-item:first-child {
grid-row-start: y;
}
Aunque como se puede ver en la siguiente imagen y
fila está más cerca del primer elemento, el navegador ha seleccionado el borde de la cuadrícula para colocar el borde inicial del elemento.
y
y el navegador selecciona la línea de cuadrícula en la línea de cuadrícula nombrada cuando asigna ese nombre a las propiedades de ubicación de la cuadrícula.Tenga en cuenta que esto no se aplica si utiliza la línea de nombre de dominio de red implícita. Por ejemplo, cambiemos el nombre de la línea de cuadrícula en el ejemplo anterior a y-start
También sabemos que el área con el nombre y
hay una red implícita de y-start
ahora si ponemos y-start
a grid-row-start
la línea nombrada de la red será la ganadora esta vez.
.grid {
display: grid;
grid-template-rows: 50px [y-start] 50px 50px 50px 50px;
grid-template-areas: "x"
"x"
"x"
"y"
"y";
}
.grid-item:first-child {
grid-row-start: y-start;
}
Accesibilidad
Una cosa a tener en cuenta al usar las propiedades de ubicación de la cuadrícula es el problema causado por la reordenación de los elementos. Cuando cambia la posición de un elemento, solo cambia el orden visual de los elementos de la cuadrícula, y ese orden puede no ser el mismo que el del documento original. un lector de pantalla que lee el contenido en el mismo orden que HTML.
Por lo tanto, evite cambiar el orden de los elementos de la cuadrícula cuando importa el orden HTML de los elementos. Por ejemplo, podría ser bueno para una galería de imágenes aleatorias, pero tal vez no tanto para sus datos de entrada.
Sin embargo, en el momento de escribir este artículo, hay una sugerencia para solucionar este problema que con suerte resolverá este problema en el futuro.
Demostración
Puede cambiar el valor de las propiedades de ubicación de la cuadrícula en la demostración para ver qué sucede con el tercer elemento de la cuadrícula:
Compatibilidad con navegador
Más información