columna de rejilla | Trucos CSS - Trucos CSS

los grid-column La propiedad CSS es una abreviatura que especifica las líneas de cuadrícula de columna donde comienza y termina un elemento de cuadrícula en el diseño de cuadrícula en una sola declaración.

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

.grid-item:nth-child(2) {
  grid-column: 3 / 5; /* Starts on the third column line and ends on the fifth column 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 segunda columna de la primera fila de la cuadrícula. Pero desde que declaramos grid-column y configúrelo para alinear el borde inicial del elemento de cuadrícula con la tercera línea de cuadrícula y su borde final con la quinta línea de cuadrícula, de modo que el elemento abarque la tercera y cuarta columna en lugar de una columna.

Propiedades constituyentes

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

Sintaxis

grid-column: <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-column-start mientras que el valor después de la barra inclinada se establece grid-column-end Puede declarar un solo valor sin la barra inclinada que se aplica a grid-column-start propiedad y conjuntos grid-column-end propiedad a auto.

Valores

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

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

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

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

/* Global values */
grid-column: inherit;
grid-column: initial; /* same as `auto` */
grid-column: revert;
grid-column: revert-layer;
grid-column: unset;

auto

Está defecto Muestra el ámbito 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 tercera línea de la cuadrícula por su índice (3), que alinea el borde inicial del elemento de cuadrícula con el borde inicial de la tercera columna, mientras que su borde posterior se alinea con la quinta columna usando <custom-ident> sintaxis:

.grid-item:nth-child(2) {
  grid-column: 3 / 5;
}

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-column: -3 / -1; /* same as: grid-column: 3 / 5; */
}

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 de seguimiento de columnas como la siguiente declaración:

.grid {
  display: grid;
  grid-template-columns: [first] 1fr [second] 1fr [third] 1fr [fourth] 1fr [last];  
}

Podemos referirnos a la tercera y quinta líneas con nuestros nombres personalizados en lugar de su índice:

.grid-item:nth-child(2) {
  grid-column: third / last; /* same as index numbers 3 / 5 */
}

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-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 content genera una línea 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-column: 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-column: content;
}

Aquí hay un ejemplo completo:

<body>
  <main></main>
  <aside></aside>
</body>

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   
  grid-template-areas: "content content sidebar";
}

main {
  grid-column: 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-columns: [bar] 1fr [foo] 1fr [bar] 300px [bar];

  /*
    Using repeat() function also gives you repeated named grid line, for example:
    grid-template-columns: repeat(3, [bar] 1fr);
  */
}

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 son ellos 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-column: 2 bar; /* The second `bar` named line which is the third line */

  /* This is equivalent to */
  grid-column-start: 2 bar;  
  grid-column-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-column: 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-column: -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 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 de columna hasta su borde posterior, podemos aplicar el siguiente valor:

.grid-item:nth-child(2) {
  grid-column: auto / 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-column: 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-columns: [y] 1fr [x] 1fr [x] 1fr [y] 1fr [x] 1fr [x];
}

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

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 aplicar el alcance de un elemento de cuadrícula a una línea de cuadrícula usando su nombre. Pero tenga en cuenta 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-column-start y grid-column-end para obtener más información y ejemplos sobre la sintaxis de estas propiedades individuales.

Ejemplos

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

diseño completo

A veces queremos que nuestro texto se estreche y se centre, pero un elemento como una imagen o un video se extiende hasta el borde de la ventana gráfica. Este tipo de diseño se denomina diseño de borde completo.

Considere el siguiente HTML:

<article>
  <h1></h1>
  <p></p>
  <img src="https://css-tricks.com/almanac/properties/g/grid-column/bridge.webp" alt="A brightly-lot floating bridge against the night sky.">
  <p></p>
</article>

Para crear este diseño utilizando CSS Grid, configuramos una cuadrícula con tres columnas:

article {
  display: grid;
  grid-template-columns: 1fr min(60ch, 100%) 1fr;
}

Ahora tenemos que configurar todos los niños para <article> en la segunda columna y alinear el borde de inicio de <img> con la primera línea de cuadrícula y su borde final con la última fila:

article > * {
  grid-column: 2 / 3;
}
article > img {
  grid-column: 1 / -1;
}

Puedes ver el resultado en la siguiente imagen:

El fragmento de diseño de borde completo es el siguiente código CSS:

.content {
  display: grid;
  grid-template-columns: 1fr min(60ch, 100%) 1fr;
}
.content > * {
  grid-column: 2 / 3;
}
.full-bleed {
  grid-column: 1 / -1;
}

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-column/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:

De forma predeterminada, los elementos de la cuadrícula se ordenan en la fila de salida, pero puede controlar su nivel usando 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, 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

Guías relacionadas

Conectado