fila de rejilla | Trucos CSS - Trucos CSS

los grid-row Una propiedad CSS es una abreviatura que especifica las líneas de cuadrícula en la línea donde un elemento de cuadrícula comienza y termina en un diseño de cuadrícula, y lo hace en una sola declaración.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-item:nth-child(2) {
  grid-row: 2 / 4; /* Starts on the second row line and ends on the fourth row line */
}

Debido al comportamiento de ubicación automática predeterminado de CSS Grid, el segundo elemento secundario de la cuadrícula en este ejemplo normalmente se colocará en la primera fila de la segunda columna de la cuadrícula. Pero declaramos grid-row y configúrelo para alinear el borde inicial del elemento de cuadrícula con la segunda línea de cuadrícula y su borde posterior con la cuarta línea de cuadrícula que mueve el elemento de cuadrícula.

Propiedades constituyentes

Como se mencionó, grid-row propiedad es una abreviatura que combina dos propiedades:

Sintaxis

grid-row: <grid-line> [ / <grid-line> ]?

<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 por sus propiedades de brazo largo
• Tipo de animación: discreto discreto

Esta propiedad puede tomar dos valores separados por una barra (/El valor antes de que se establezca la barra grid-row-start mientras que el valor después de la barra inclinada se establece grid-row-end Puede declarar un solo valor sin la barra inclinada que se aplica a grid-row-start propiedad y conjuntos grid-row-end propiedad a auto.

Valores

/* Keyword value */
grid-row: auto;

/* <custom-ident> value */
grid-row: myLineName;
grid-row: myGridArea;
grid-row: header-start / main-end;

/* <integer> + <custom-ident> values */
grid-row: 3;
grid-row: 2 / -3;
grid-row: main 2;
grid-row: 3 line / 5 line;

/* span + <integer> + <custom-ident> values */
grid-row: span 3;
grid-row: span 2 / 5;
grid-row: 1 / span myline;
grid-row: 2 / span gridline 3;

/* Global values */
grid-row: inherit;
grid-row: initial; /* same as `auto` */
grid-row: revert;
grid-row: revert-layer;
grid-row: 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 a los bordes inicial y final 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), que alinea el borde inicial del elemento de cuadrícula con el borde inicial de la segunda fila, mientras que su borde posterior se alinea con la cuarta fila usando <custom-ident> sintaxis:

.grid-item:nth-child(2) {
  grid-row: 2 / 4;
}

Tenga en cuenta que también puede usar un número negativo para especificar una línea de cuadrícula, pero se cuenta a partir del borde posterior de la cuadrícula. El siguiente código apunta a las mismas líneas de cuadrícula del ejemplo anterior, pero cuenta en orden inverso:

.grid-item:nth-child(2) {
  grid-row: -3 / -1;

  /* same as: */
  grid-row: 2 / 4;
  grid-row: 2 / -1;
  grid-row: -3 / 4;
}

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 asignar un nombre personalizado a una línea de red usando grid-template-columns y grid-template-rows propiedades de cuadrícula de diseño basadas en líneas 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 y cuarta líneas con nuestros nombres personalizados en lugar de su índice:

.grid-item:nth-child(2) {
  grid-row: second / last; /* same as index numbers 2 / 4 */
}

Tenga en cuenta que <custom-ident> No puede tomar span valor. span La palabra clave está reservada para las propiedades de diseño de cuadrícula (p. ej. grid-row: 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 content genera una fila con nombre content-start antes y un nombre content-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: content-start / content-end;
}

Alternativamente, puede hacer referencia al nombre del campo para colocar un elemento al principio y al final de la línea. content área nombrada:

.grid-item:nth-child(2) {
  grid-row: content;
}

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"
    "content"
    "footer";
}

main {
  grid-row: content;
}

Esto establece la posición de <main> elemento a content á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 red que puede utilizar 2 para seleccionarlo como punto de partida:

.grid-item:nth-child(2) {
  grid-row: 2 bar; /* The second `bar` named line which is the third line */

  /* This is equivalent to */
  grid-row-start: 2 bar;  
  grid-row-end: auto;  
}

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: 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: -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.

Tenga en cuenta que el valor predeterminado es 1 si no se especifica un entero en ninguna parte de esta sintaxis.

span <integer>

Usando span La palabra clave seguida de un número entero indica el número de pistas 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 líneas por fila hasta su borde posterior, podemos aplicar el siguiente valor:

.grid-item:nth-child(2) {
  grid-row: 1 / span 3;
}

span <custom-ident>

También es posible combinar span palabra clave con el nombre de una línea de cuadrícula para hacer que el elemento de cuadrícula se expanda hasta que alcance esa línea de cuadrícula especificada.

.grid-item:nth-child(3) {
  grid-row: 3 / span lastline;
}

Dado que se conoce la fila inicial del elemento de cuadrícula (3), podemos expandir el elemento hasta que llegue a una línea de cuadrícula con nombre lastline.

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-template-columns: 1fr 1fr;
}

.grid-item:nth-child(2) {
  grid-row: 2 / span x 2; /* equivalent to grid-row-end: 5; */
}

Establecemos la línea de inicio del elemento de cuadrícula en la segunda fila. Luego queremos que se extienda hacia adelante hasta que llegue a una línea de la cuadrícula llamada xY como queremos que sea esto último x línea de cuadrícula, terminamos con span x 2.

Como resultado, nuestro elemento de malla se extiende desde la segunda fila, como se ilustra a continuación. La primera fila que cae es la primera, xseguido por yy finalmente, llega a la segunda línea deseada llamada x.

Esta sintaxis es útil cuando desea definir el alcance de un elemento de cuadrícula en una línea de cuadrícula usando su nombre, pero sabe que hay más de una línea de cuadrícula con el mismo nombre usando este método, por lo que agregamos un número entero para decir que queremos N de esta línea de cuadrícula.

Mira grid-row-start y grid-row-end para obtener más información y ejemplos sobre la sintaxis de estas propiedades individuales.

Ejemplos

Veamos algunos escenarios diferentes donde grid-row puede ser usado.

gráfico de barras flotante

Muchos de nosotros solemos pensar en CSS Grid como una herramienta para crear la estructura básica y el diseño de una página web o aplicación, pero CSS Grid es capaz de mucho más que eso.

Tome el siguiente diagrama como ejemplo. Si observa detenidamente, puede ver que cada barra se extiende de una determinada fila a otra para mostrar el rango que debe marcar en el gráfico.

Si ve el gráfico como una cuadrícula, verá con qué facilidad puede determinar el tamaño y la posición de las barras utilizando las propiedades de diseño de la cuadrícula CSS.

Para crear una cuadrícula para este gráfico, puede escribir el siguiente código:

.chart {
  display: grid;
  grid-template-columns: repeat(10, 40px);
  grid-template-rows: repeat(9, 40px);
  gap: 0 8px;
}

Ahora necesitamos colocar todas las barras en las filas y columnas correctas:

.bar:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
}

.bar:nth-child(2) {
  grid-column: 2;
  grid-row: 5 / 10;
}

/* ... */

.bar:nth-child(10) {
  grid-column: 10;
  grid-row: 9 / 10;
}

Echa un vistazo a la demostración y mira cómo se combina el resto:

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/image.png" alt="how dare you leave alt empty?">
  <figcaption>The caption of our image</figcaption>
</figure>

figure {
  display: grid;
}

img,
figcaption {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

Esto es lo que obtenemos:

Por defecto, los elementos de la cuadrícula son pila en la fila de salida, pero puede controlar su nivel usando el z-index En el siguiente ejemplo, superponemos algunos elementos y usamos z-index propiedad para mostrar el segundo elemento de nivel superior en el contexto de apilamiento:

.item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  z-index: 1;
}

Accesibilidad

Una cosa a tener en cuenta al usar las propiedades de ubicación de la cuadrícula es el problema causado por el reordenamiento 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, esto podría estar bien 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

Guías relacionadas

Conectado