Grid-row-start | Trucos CSS – Trucos CSS

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.

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:

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 barComo 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 barpodemos 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;
}

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.

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 xY 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 yel siguiente es el primero xy finalmente, presiona la segunda línea deseada con un nombre x.

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 testpero 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 5pero 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 5Por otro lado, establecemos grid-row-start a una línea de red con el nombre de testUna 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.

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;
}

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 5para 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 yy 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-startVeamos 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.

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-startTambié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-startla 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