Cuadrícula-plantilla-columnas Trucos CSS - Trucos CSS
EN grid-template-columns La propiedad CSS es parte de Especificación de diseño de cuadrícula CSS definir las columnas de un contenedor de red especificando el tamaño de los rieles y los nombres de sus filas.
.sidebar-layout {
display: grid;
grid-template-columns: 300px 1fr;
}Vale la pena notar la diferencia entre las líneas de la cuadrícula y las pistas de celosía al excavar grid-template-columns propiedad. Las líneas de cuadrícula se refieren a los nombres de las líneas que definen las columnas y filas de la cuadrícula. Las rutas de red se refieren a la longitud del espacio entre las líneas de red.
Sintaxis
grid-template-columns: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?Definición completa
where:
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> = [ <line-names> | <name-repeat> ]+
where:
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
where:
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>- Valor inicial:
none - Se refiere a: contenedores de celosía
- heredado: no
- Valor estimado: como se indica, pero con longitudes relativas convertidas a longitudes absolutas
- Tipo de animación: una lista simple de longitud, porcentaje o cálculo, siempre que las únicas diferencias estén en los valores de los componentes de longitud, porcentaje o cálculo en la lista.
Valores
/* Keyword value */
grid-template-columns: none;
/* <track-list> values */
grid-template-columns: 200px 1fr 180px;
grid-template-columns: [linename col1] 250px [line2];
grid-template-columns: [sidebar] 1fr [content] 2fr;
grid-template-columns: fit-content(50%);
grid-template-columns: minmax(200px, 1fr) minmax(100px, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-template-columns: subgrid;
grid-template-columns: masonry;
/* <auto-track-list> values */
grid-template-columns: 100px repeat(auto-fill, 100px) 200px;
grid-template-columns: 100px repeat(2, 1fr auto) 200px repeat(3, 5fr);
grid-template-columns: minmax(150px, max-content) repeat(auto-fill, 180px) 15%;
grid-template-columns: [col1] 100px [col1-end] repeat(auto-fit, [line3] 400px);
/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial; /* same as `none` */
grid-template-columns: revert;
grid-template-columns: unset;none
Está defecto valor. El uso de none Cosas de valor grid-template-columns no genera rastros explícitos de una cuadrícula, lo que a su vez significa que las columnas son implícitamente generado (es decir, hecho para usted sin tener que expresamente definirlos) y el tamaño de la pista está determinado por grid-auto-columns Propiedad.
Tenga en cuenta que, grid-template-columns no es solamente forma de crear trazas explícitas a partir de columnas de cuadrícula. También se puede hacer con la ayuda de grid-template-areas una propiedad que permite un área de red que se puede definir con nombres personalizados (p. sidebar, mainy otros.).
La diferencia entre redes implícitas y explícitas está bien resumida en esta publicación de Manuel Matuzovic.
<length>
Este valor puede ser cualquier longitud de CSS válida y no negativa, como px, em y rem por cierto, para especificar el tamaño de la pista (es decir, el ancho) de la columna.
<percentage>
Este es un valor no negativo en relación con el tamaño interno del contenedor de celosía. Si el tamaño del contenedor de celosía depende del tamaño de sus pistas, entonces el porcentaje debe tratarse de la misma manera que la declaración. auto.
Una desventaja de usar un valor de porcentaje es que si agrega espacios entre pistas, el tamaño de los espacios se agregará al tamaño de las pistas, lo que puede causar un desbordamiento. fr unidad o auto una palabra clave para dimensionar las canciones y evitar que sucedan.
<flex>
Este es un valor no negativo expresado en fr unidades y le permite crear senderos con una cuadrícula flexible estableciendo el tamaño de la pista como parte de espacio libre De esta manera, a medida que la cuadrícula cambia el ancho, también lo hacen las columnas, lo que hace que la cuadrícula responda mejor.
Por ejemplo, considere un contenedor de celosía de tres columnas que es 900px ancho. Digamos que el ancho de la primera columna (izquierda) es fijo (es decir, no cambia) en 300px mientras que la segunda columna ocupa una unidad fraccionaria (1fr) y la tercera columna pesa dos unidades fraccionarias (2fr):
.grid {
display: grid;
width: 900px;
grid-template-columns: 300px 1fr 2fr;
}Las segundas dos columnas son fraccionarias, por lo que ocuparán cualquier espacio que quede. Y en este caso el espacio disponible es el que queda después de arreglar la primera columna 300px se tiene en cuenta el ancho. Luego, las dos segundas columnas dividen el resto según la cantidad de fracciones que reciben.
En este ejemplo, el espacio restante y disponible es 600px (es decir. 900px menos 300pxLa segunda columna recibe un hígado (1fr) de este espacio y la tercera columna recibe dos fracciones2fr). Tomemos math-y por un momento para calcular el ancho de una parte de 600px:
1fr = ([Grid Container Width] - [Fixed Column Width]) / [Sum of the flex factors]
1fr = (900px - 300px) / 3
1fr = 600px / 3
1fr = 200px¡Ajá! es un hígado 200pxY como la segunda columna es 1frtiene que ser 200px también Esto nos deja con 400px espacio disponible (900px - 300px - 200px), lo que simplemente sucede dos veces el tamaño de la segunda columna.
¡Pero espera! Hay más.
Recuerde que la cuadrícula tiene en cuenta cualquier espacio que se haya agregado entre las rutas de la cuadrícula al determinar cuánto espacio está disponible para asignar columnas fraccionarias. La ventaja aquí, por supuesto, es que nuestras columnas nunca sobrellenarán el contenedor de la red.
Añadamos un hueco al ejemplo anterior:
.grid {
display: grid;
width: 900px;
grid-template-columns: 300px 1fr 2fr;
gap: 15px;
}Sé que hemos anunciado un pase aquí una vez, pero de hecho es como lo hemos declarado. dos omisiones Esto se debe a que hay 15px un espacio entre cada columna (uno entre la columna 1 y la columna 2 y otro entre la columna 2 y la columna 3). Eso significa que tenemos 30px valor de los vacíos en nuestra red que deben ser reportados en el espacio disponible.
1fr = ([Grid Container Width] - [Gaps] - [Fixed Column Width]) / [Sum of the flex factors]
1fr = (900px - 30px - 300px) / 3
1fr = 570px / 3
1fr = 190pxNo sé a ti, pero a mí no me gusta tener que hacer muchos cálculos manuales. Esto hace que la red CSS sea excelente: ¡lo necesita todo!
minmax(min, max)
EN minmax() la función acepta dos argumentos: valor de longitud mínima y valor máximo. Y lo que dice en el contenedor de red es que grid-template-columns puede no ser más estrecho del valor mínimo, pero no más amplio del valor máximo. Nuestra Guía de funciones de CSS tiene una explicación más profunda y detallada de cómo funciona la función.
Tome el siguiente ejemplo:
grid-template-columns: 200px minmax(100px, 400px);Aquí hay dos columnas: una es 200px de ancho y otra, que se expresa como minmax(100px, 400px)Se ve raro, ¿no? Pero todo lo que dice es que la segunda columna deber tomar al menos 100px espacio, pero no más de 400px después de las primeras columnas 200px es tomado en cuenta.
Para decirlo más claramente: mientras haya más de 100px de espacio disponible, entonces la segunda columna se puede doblar para 400px pero tiene que parar aquí, de lo contrario la columna es 100px ancho.
EN min y max argumentos toman todos los siguientes valores excepto min el valor no puede ser un valor flexible (por ej. 1fr):
<length-percentage> | <flex> | min-content | max-content | autoEntonces esto no es válido ya que min valor es un valor flexible:
grid-template-columns: minmax(1fr, 500px) 3fr;Pero estos son perfectamente válidos:
grid-template-columns: minmax(auto, 1fr) 3fr;
grid-template-columns: minmax(200%, 1fr) 1fr;auto
EN auto palabra clave se comporta de manera similar a minmax(min-content, max-content) en la mayoría de los casos.
Desde auto las dimensiones de las pistas se pueden estirar desde align-content y justify-content propiedades, ocuparán el resto del contenedor de red de forma predeterminada (ya sabe, auto-máticamente). Dicho esto, auto el tamaño de las pistas no puede ganar una batalla fr unidades al asignar el espacio restante: se ajustan al tamaño máximo de su contenido.
Echa un vistazo a los resultados de estos dos ejemplos de canciones:
grid-template-columns: auto auto auto;
grid-template-columns: auto 1fr auto;Cuando las tres columnas se establecen en auto (que también podríamos escribir como repeat(3, auto) - pero más sobre eso más adelante), todo lo que hacen es compartir el mismo espacio. Pero cuando ponemos una unidad fraccionaria en el medio como segunda columna, auto las columnas son tan anchas como su contenido y 1fr la columna ocupa el espacio restante.
fr unidad a pistas automáticasmin-content
EN min-content palabra clave representa el mas pequeño la posible cantidad de espacio que un elemento puede ocupar en un contenedor de celosía sin desbordar su contenido. El contenido puede ser textos, imágenes o videos.
Digamos que el contenido es "CSS es genial". min-content es la amplitud del mundo "genial" porque es la pieza de contenido más amplia (más amplia que "CSS es"). Si la columna se vuelve más estrecha, entonces el texto comienza a llenar el contenedor.
En el código se ve así:
.grid {
display: grid;
grid-template-columns: min-content 1fr;
gap: 1rem;
}… Lo que lleva a algo como esto:
min-content palabra clave en el diseño de la redmax-content
EN max-content palabra clave representa tamaño mínimo requerido para un elemento que puede contener todo su contenido sin ser envuelto o abarrotado. Sé que un nombre que incluye "max" suena como si estuviéramos tratando con un tamaño máximo, por lo que ese valor puede ser un poco una broma.
Si reconsideramos la nuestra min-content ejemplo anterior, una pista de celosía con un valor de tamaño de max-content crecerá mientras su contenido quepa en una fila. Entonces, en el caso de "CSS es genial" max-content sin embargo, hay mucho espacio que estas tres palabras ocupan juntas en una sola línea.
.grid {
display: grid;
grid-template-columns: max-content 1fr;
gap: 1rem;
}
max-content palabra clave en el diseño de la redfit-content( <length-percentage> )
EN fit-content() la función (hay una explicación sólida en nuestra Guía de funciones de CSS) usa el espacio disponible y acepta un percentage o length valor como el tamaño máximo permitido para la ruta de red mientras se asegura de que la pista nunca exceda max-content y nunca se reduce más allá del mínimoEl mínimo es a menudo, pero no siempre, igual a min-content.
.grid {
display: grid;
grid-template-columns: fit-content(700px) fit-content(700px) 1fr;
gap: 1rem;
}En la siguiente figura, la primera columna no se extiende más allá de la de ella. max-content tamaño (es decir, el ancho de las palabras "fit-content (700px)" por línea): se extiende solo para ajustarse a su contenido. Sin embargo, la segunda columna tiene mucho más contenido y deja de estirarse una vez que alcanza un ancho de 700pxque es la restricción establecida en la función:
700pxSi es posible para ajustar todo el contenido dentro de este límite, genial, detente ahí max-content f. De lo contrario, muestre todo lo que pueda 700pxluego comience a dividirse en filas adicionales.[linename]
Si bien las líneas de red siempre se pueden especificar con un nombre numérico implícito, también podemos darles nombres personalizados para que el código sea más fácil de entender en una red más compleja. A continuación, se puede especificar cada nombre de fila al colocar elementos de red por nombres de fila.
Las líneas de cuadrícula pueden tener más de un nombre agregando nombres entre corchetes y separando cada uno con un espacio:
grid-template-columns: [first content-start] 1fr [content-end sidebar-start] 300px [lastline];
Tenga en cuenta que el nombre de la línea es un <custom-ident>un tipo de datos común que representa cualquier identificador CSS válido que no se malinterpretará como una palabra clave predefinida en la definición de valor de esta propiedad. Entonces podemos llamar orden super-awesome-spider-monkey pero no hay valores CSS globales que puedan causar conflictos, p. span, auto, inherit, initial y así.
También tales identificadores están completos distinguir mayúsculas de minúsculasPor ejemplo, CSS trata sidebar-end y Sidebar-Name como dos nombres de línea completamente diferentes y no relacionados. También los nombres de línea se pueden asignar explícitamente con grid-template-columns propiedad, o asignada implícitamente por áreas de red nombradas con grid-template-areas Propiedad.
repeat([ <positive-integer> | auto-fill | auto-fit ] , <track-list>)
EN repeat() función es una forma eficaz de definir el número de grid-template-columns cuando las columnas son iguales. La función asume el número de columnas, seguido del tamaño de la columna:
/* Writing this */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
/* is the same as this: */
grid-template-columns: repeat(5, 1fr);Otro ejemplo, esta vez de la especificación:
grid-template-columns: 10px [col-start] 250px [col-end]
10px [col-start] 250px [col-end]
10px [col-start] 250px [col-end]
10px [col-start] 250px [col-end] 10px;
/* same Ss above, except easier to write */
grid-template-columns: repeat(4, 10px [col-start] 250px [col-end]) 10px;auto-fill y auto-fit
Además de un número entero que indica el número de repeticiones, dos palabras clave de auto-fill y auto-fit también se permite que sea el primer argumento de repeat() función.
A diferencia de un número fijo de iteraciones, estas palabras clave le permiten mostrar tantas columnas de un tamaño determinado como quepan en una fila desde un contenedor de malla.
Las dos palabras clave de auto-fill y auto-fit son bastante similares. Ambos intentan colocar automáticamente tantos elementos de cuadrícula como sea posible en una columna de cuadrícula antes de cambiar a una nueva fila. ¿La diferencia? auto-fill llena tantas columnas como sea posible y cuando los elementos estén terminados, deje cualquier espacio vacío. auto-fitpor otro lado, aumentará el ancho de las columnas para que no quede espacio.
auto-fill crea columnas vacías pero auto-fit amplía los existentes.Hay varias restricciones en el uso de repeat() una característica que vale la pena llamar:
- No se puede anidar un
repeat()función dentro de unrepeat()función.
/* This is invalid */
grid-template-columns: repeat(4, 1fr repeat(5, 1fr));- No acepta valores de longitud inherentes o flexibles (p.
frunidades) cuando se usaauto-filloauto-fitSolo acepta el tamaño explícito de la canción, por lo que puede calcular la cantidad de columnas que van al contenedor de la red.
/* This is invalid */
grid-template-columns: repeat(auto-fit, 1fr);- Sin embargo, es bueno usar el tamaño inherente o flexible como el segundo valor de la función, siempre que el primer valor sea un número positivo.
/* These are invalid */
grid-template-columns: repeat(auto-fit, 1fr);
grid-template-columns: repeat(min-content, 1fr);
/* This is valid */
grid-template-columns: repeat(6, 1fr);- Solo se puede usar una vez en
grid-template-columnslista de canciones en usoauto-filloauto-fit.Podemos usar muchosrepeat()funciones, sin embargo, mientras que el segundo valor es fijo.
/* These are invalid */
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(auto-fill, minmax(5rem, auto));
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(3, 1fr);
/* This is valid */
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(3, 200px);subgrid
La subred se considera experimental y solo es compatible con Firefox en el momento de escribir este artículo.
¿Podemos tener una cuadrícula? dentro de ¿enrejado? ¡Por supuesto que podemos! esto es gracias a subgrid valor de la palabra clave. Declarar esto permite que la red interna (hija) comparta las líneas de la red externa (principal), lo que permite líneas más consistentes en la ruta sin tener que declararlas nuevamente.
Entonces, digamos que tenemos una cuadrícula en la cuadrícula:
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.grid-container .grid-item {
display: grid;
}Podemos convertir esta red anidada en una subgrid para compartir las líneas de ruta con la red principal:
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.grid-container .grid-item {
display: grid;
grid-template-columns: subgrid;
}Ahora los elementos de la red secundaria se colocarán y dimensionarán de acuerdo con el tamaño de la pista del contenedor de la red principal. Por ejemplo, considere el siguiente HTML:
<div class="grid">
<div class="item"></div>
<div class="item subgrid">
<div class="subitem"></div>
<div class="subitem"></div>
</div>
<div class="item"></div>
<div class="item"></div>
</div>Ahora hagamos una subred:
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Establish a grid with 4 tracks */
}
.item {
grid-column: 1/-1; /* Make all items as wide as the 4 tracks */
}
.subgrid {
display: grid;
grid-template-columns: subgrid;
grid-column: 3/-1; /* Make the subgrid item size, half of the other items */
}Aquí puede ver que los elementos de la subred se ajustan al tamaño de la pista de la red principal:
Las brechas de subred se heredan del padre, pero esto se puede revertir de manera diferente gap valor del elemento de subred:
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem; /* This is inherited by the child grid */
}
.grid-container .grid-item {
display: grid;
grid-template-columns: subgrid;
gap: 0.5rem; /* This overrides the parent grid's gap */
}La subred tiene sus propios números de línea, por ejemplo, cuando usa un número de línea 1 en su subred, apunta a la primera línea de la red secundaria, no a la red principal. Por lo tanto, incluso si la subred comienza en la tercera línea de la red principal, la primera línea de la subred seguirá siendo 1 y no 3.
Y, por supuesto, podemos declarar nombres de línea personalizados en una red de subred:
.grid-container .grid-item {
display: grid;
grid-template-columns: subgrid [sidebar-start] [sidebar-end] [main-start] [main-last];
}Ah, y podemos aprovecharlo al máximo. repeat() función aquí para especificar nombres de línea para la ruta:
.grid-container .grid-item {
display: grid;
grid-template-columns: subgrid repeat(2, [a] 1fr [b]);
}Una cosa a tener en cuenta, sin embargo, es que repeat() la función combina todos los nombres de líneas de canciones que están una al lado de la otra.
/* These are equivalent */
grid-template-columns: repeat(2, [a] 1fr [b]);
grid-template-columns: [a] 1fr [b a] 1fr [b];Tenga en cuenta que no puede tener rutas implícitas en esta dimensión en la subred. Por lo tanto, si agrega más elementos de red a la combinación, se colocarán en las rutas de subred explícitas existentes. Puede ver el resultado de agregar otra subred secundaria al ejemplo anterior en la siguiente imagen:
masonry
¿Sabes lo que queremos decir con albañilería¿derecho? Este es un excelente diseño en el que los elementos de la cuadrícula se organizan de alguna manera y se organizan juntos en función del espacio vertical disponible en la columna. Fue popularizado hace años por Biblioteca de JavaScript de David DeSandro del mismo nombre.
Gracias a CSS Grid, la mampostería será algo que podremos lograr sin recurrir a JavaScript. Sin embargo, en el momento de redactar este informe, esto sigue siendo un resultado importante como parte de Nivel 3 de la especificación CSS Gridque se encuentra actualmente en el borrador del editor. Sin embargo, está disponible en Firefox detrás de una bandera.
Probablemente veremos cambios en la especificación entre ahora y el momento en que se publique. Pero esto es lo que parece en este momento:
.container {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(4, 1fr);
}Ejemplos
¡Sí, es hora de una demostración! Tengo algunos ejemplos que muestran las fortalezas de grid-template-columns una propiedad que puede encontrar al trabajar con un diseño de cuadrícula CSS.
Diseño de la barra lateral
Se puede lograr un diseño de barra lateral simplificado con el siguiente CSS:
.layout {
display: grid;
grid-template-columns: 1fr 250px;
}Y aqui esta el resultado:
Diseño de tarjeta receptivo y flexible con una cantidad dinámica de elementos
Este puede ser el fragmento más mágico del grupo. Digamos que desea envolver tantas columnas en una fila de celosía antes de que se envuelva en una nueva fila. Con este fragmento combinamos las fuerzas de repeat(), auto-fity minmax() para hacer precisamente eso:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));De esta forma obtenemos un número repetido de columnas (gracias a repeat()), que llenará todo el espacio de red disponible (gracias a auto-fit) hasta que nunca se encoge más que 250px y cada uno ocupa una parte igual del espacio (gracias a minmax()).
Alineación de elementos de forma.
¿Alguna vez ha tenido problemas con CSS para poner los controles de formulario en orden? El caso clásico es un formulario con entradas de texto apiladas, donde la etiqueta de entrada está a la izquierda y la etiqueta de entrada está a la derecha. Cuando las etiquetas son desiguales, el punto de partida de las entradas hace que las cosas se vean más como una escalera de ajedrez que como una forma ordenada.
Sin embargo, con CSS Grid, podemos decirle a la columna de la izquierda que evita que se muestre la etiqueta de entrada max-content y la columna derecha, que contiene las entradas para ocupar el resto del espacio.
grid-template-columns: max-content 1fr;¡No se necesitan elementos ni carcasas adicionales!
columnas planas
Si utiliza fr unidad para dimensionar las columnas de la cuadrícula, el espacio disponible se asigna después el contenido decide cuánto espacio necesita cada columna. Si desea tres columnas del mismo tamaño, puede considerar hacer esto:
grid-template-columns: 1fr 1fr 1fr;¡Y esto no está del todo mal!, pero debido a que el tamaño mínimo del diseño de la red es autodepende de la longitud del contenido para obtener columnas realmente planas. Entonces, restamos el tamaño mínimo, pero proporcionamos un valor cero en minmax() funciones para cada columna de la siguiente manera:
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
Deja una respuesta