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.
grid-column
Propiedad de cuadrícula CSS.Propiedades constituyentes
Como se mencionó, grid-column
propiedad es una abreviatura que combina dos propiedades:
Sintaxis
grid-column: <grid-line> [ / <grid-line> ]?
Definición completa
<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:
grid-column
propiedad CSSPosicionamiento 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.
grid-column
Propiedad CSS.<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 bar
Como 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 bar
podemos 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;
}
grid-column
Propiedad CSS.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
.
grid-column
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-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 x
Y 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, x
seguido por y
y finalmente, llega a la segunda línea deseada llamada x
.
x
usando grid-column
propiedad CSSEsta 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:
grid-column
Propiedad CSS Configure el elemento de imagen para que abarque todas las columnas de la cuadrícula mientras que los otros elementos están en la segunda columna.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;
}
z-index
propiedad CSSAccesibilidad
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
fragmento
el 30 de septiembre de 2022
Guía completa de Grid
Deja una respuesta