| Propiedad | Función |
| fr | Esta unidad es de tipo tamaño y significa "parte del espacio disponible". 1fr = 1 parte del espacio disponible |
| grid-template | Es una propiedad abreviada que te permite definir tanto las filas como las columnas de una cuadrícula en una sola declaración. Es una manera conveniente de establecer tanto la estructura de filas como de columnas en una sola regla.La propiedad grid-template combina grid-template-rows y grid-template-columns en una sola declaración. |
| grid-container {
display: grid;
grid-template: 1fr 2fr / 100px 1fr;
}
|
En este ejemplo, se establece la disposición de las filas y columnas de la cuadrícula utilizando grid-template. Los valores antes de la barra (/) representan las filas, y los valores después de la barra representan las columnas. En este caso, estamos definiendo una fila con una fracción flexible y otra con el doble de espacio. Para las columnas, establecemos una columna de 100 píxeles y otra columna flexible. |
| grid-template-columns | Permite controlar la distribución y el tamaño de las columnas en una cuadrícula. Esta propiedad permite definir el ancho y la disposición de las columnas en una cuadrícula CSS. Cuando se crea una cuadrícula utilizando la propiedad display: grid;, puedes usar grid-template-columns para especificar cómo se deben distribuir las columnas en esa cuadrícula. Puedes definir tamaños fijos para las columnas, usar valores flexibles o proporcionales, o incluso mezclar diferentes unidades de medida para crear una disposición personalizada. |
| grid-template-columns: 1fr 2fr 1fr | En este ejemplo, la propiedad grid-template-columns tiene tres valores, cada uno especificando el tamaño de una columna. 1fr significa una fracción flexible, lo que permite que la primera y la última columna ocupen un espacio igual y que la columna del medio ocupe el doble de ancho.Puedes utilizar unidades de medida como píxeles, porcentajes, fracciones flexibles (fr), entre otras, para ajustar el diseño de las columnas según tus necesidades. |
| grid-template-rows | Se utiliza para definir la altura y la disposición de las filas en una cuadrícula. Permite establecer cómo se distribuirán y dimensionarán las filas dentro de la cuadrícula. Cuando creas una cuadrícula utilizando la propiedad display: grid;, puedes usar grid-template-rows para especificar cómo se deben comportar las filas en esa cuadrícula. Puedes definir alturas fijas para las filas, utilizar valores flexibles o proporcionales, o incluso combinar diferentes unidades de medida para lograr un diseño personalizado. |
| grid-template-rows: 100px 1fr 2fr; | En este ejemplo, la propiedad grid-template-rows tiene tres valores, cada uno especificando la altura de una fila. 1fr significa una fracción flexible, lo que permite que la segunda fila ocupe la mitad de la altura total de la cuadrícula y que la tercera fila ocupe un cuarto de la altura total.También puedes utilizar unidades de medida como píxeles, porcentajes, fracciones flexibles (fr), entre otras, para ajustar el diseño de las filas según tus necesidades. |
| grid-gap | Permite establecer el espacio entre filas y columnas en una cuadrícula. También se le conoce como gap o grid-row-gap y grid-column-gap cuando se utiliza de manera más específica para separar filas y columnas respectivamente. La propiedad grid-gap acepta uno o dos valores, que representan el espacio vertical y horizontal entre las celdas de la cuadrícula. |
| grid-gap: 20px | En este ejemplo, el grid-gap establece un espacio de 20 píxeles entre las filas y las columnas de la cuadrícula. |
| grid-row-gap | Permite establecer el espacio entre filas. |
| grid-column-gap | Permite establecer el espacio entre columnas. |
| grid-auto-flow | Se utiliza para controlar cómo los elementos se distribuyen automáticamente en las celdas de una cuadrícula cuando no se han definido explícitamente mediante grid-template-rows y grid-template-columns. Esta propiedad permite especificar si los elementos se deben posicionar en filas o columnas automáticamente, y en qué dirección deben fluir. |
| grid-auto-flow: row | Esto indica que los elementos se deben posicionar automáticamente en filas, llenando primero una fila antes de pasar a la siguiente. |
| grid-auto-flow: column | Esto indica que los elementos se deben posicionar automáticamente en columnas, llenando primero una columna antes de pasar a la siguiente. |
| grid-auto-flow: dense | Este valor permite optimizar el espacio disponible al intentar llenar los huecos en la cuadrícula antes de crear una nueva fila o columna. Puede ser útil para optimizar el diseño cuando los elementos tienen tamaños variables. |
| grid-auto-flow: row dense | Similar a dense, pero los elementos se posicionan automáticamente en filas. |
| grid-auto-flow: column dense | Similar a dense, pero los elementos se posicionan automáticamente en columnas. |
| grid-auto-rows | Se utiliza en CSS Grid Layout para establecer la altura predeterminada de las filas automáticas que se generan para acomodar elementos no colocados explícitamente en filas definidas. Es útil cuando deseas asegurarte de que las filas automáticas tengan un tamaño mínimo o una apariencia uniforme, incluso si los elementos en esas filas no tienen tamaños específicos definidos. |
| grid-auto-rows: 50px | En este ejemplo, se ha establecido que las filas automáticas tendrán una altura de 50px por defecto. |
| grid-auto-columns | Se utiliza en CSS Grid Layout para establecer el ancho predeterminado de las columnas automáticas que se generan para acomodar elementos no colocados explícitamente en columnas definidas. Es útil cuando deseas asegurarte de que las columnas automáticas tengan un tamaño mínimo o una apariencia uniforme, incluso si los elementos en esas columnas no tienen tamaños específicos definidos. |
| grid-auto-columns: 50px | En este ejemplo, se ha establecido que las columnas automáticas tendrán un ancho de 50px por defecto. |
| grid-auto-rows, grid-auto-columns, grid-template-rows, grid-template-columns, grid-auto-flow, grid-gap, etc.) aceptan el valor "auto" en ciertos contextos. | El valor "auto" es útil para permitir que las filas y columnas se ajusten automáticamente según el contenido de los elementos en la cuadrícula, asegurando que el contenido se muestre correctamente sin exceder los límites definidos. |
| repeat(). | Se utiliza para crear una serie repetida de elementos dentro de las propiedades grid-template-rows y grid-template-columns en CSS Grid Layout. Esto es útil cuando deseas establecer una serie de tamaños de filas o columnas de manera repetitiva y consistente en una cuadrícula. |
| grid-template-rows: repeat(numero-de-repeticiones, tamaño) | Este es un ejemplo donde, numero-de-repeticiones es la cantidad de veces que deseas repetir el tamaño y tamaño es el valor de tamaño que se repetirá. |
| grid-template-rows: repeat(3, 100px auto) | Ejemplo 1: Repetir 3 veces una fila de 100px seguida de una fila automática. |
| grid-template-columns: repeat(5, 1fr) | Ejemplo 2: Repetir 5 veces una columna de 1fr. |
| grid-column-start | Se utiliza para indicar en qué línea de la cuadrícula debe comenzar un elemento en el eje de las columnas. Esta propiedad permite controlar la ubicación horizontal de un elemento dentro de la cuadrícula, especificando en qué columna debe comenzar. |
| grid-column-end | Se utiliza para indicar en qué línea de la cuadrícula debe terminar un elemento en el eje de las columnas. Esta propiedad te permite controlar la ubicación horizontal final de un elemento dentro de la cuadrícula, especificando en qué columna debe terminar. |
| grid-row-start | Indica en qué línea de la cuadrícula debe comenzar un elemento en el eje de las filas. Puedes utilizar números enteros para indicar líneas específicas o valores que representen nombres de líneas de la cuadrícula. |
| grid-row-start: 2 | Ejemplo 1: Comienza en la segunda línea de la cuadrícula de filas. |
| grid-row-end | Indica en qué línea de la cuadrícula debe terminar un elemento en el eje de las filas. Al igual que grid-row-start, puedes usar números enteros o valores que representen nombres de líneas de la cuadrícula. |
| span | indicar que un elemento debe extenderse por un número específico de filas o columnas, contando desde la línea en la que empieza. Cuando usas "span" en conjunto con un número, estás indicando que el elemento debe ocupar ese número de filas o columnas. Esto es útil cuando deseas que un elemento se extienda por múltiples filas o columnas sin necesidad de especificar manualmente en qué línea debe terminar. |
| grid-row-end: span 3 | Ejemplo de span: Termina después de 3 filas, incluyendo la fila de inicio. |
| grid-column: 2 / span 3 | Ejemplo de span: Esto indica que el elemento comenzará en la segunda línea de la cuadrícula de columnas y se extenderá por tres columnas. En otras palabras, el elemento ocupará las columnas 2, 3 y 4 de la cuadrícula de columnas. |
| grid-row: span 2 / 4 | Ejemplo de span: Esto indica que el elemento se extenderá verticalmente por dos filas, comenzando desde la línea de inicio. Además, el elemento ocupará la cuarta columna de la cuadrícula de columnas. |
| grid-row | es una propiedad abreviada que se utiliza para definir la ubicación vertical de un elemento dentro de una cuadrícula en el eje de las filas. Con grid-row, puedes establecer tanto el inicio como el final de la ubicación del elemento en las filas de la cuadrícula en una sola declaración. El valor de grid-row se compone de dos números (o nombres de líneas) separados por una barra (/). El primer número indica en qué línea de la cuadrícula debe comenzar el elemento, y el segundo número indica en qué línea debe terminar. |
| grid-row: 2 / 5 | Ejemplo 1: Comienza en la segunda fila y termina en la quinta fila. |
| auto-fill | Esta función se utiliza para crear tantas columnas como puedan caber en el espacio disponible. Las columnas se llenarán automáticamente con los elementos disponibles. Es útil cuando deseas que los elementos se ajusten automáticamente según el espacio disponible en la pantalla. |
| minmax() | Se utiliza principalmente en las propiedades grid-template-columns y grid-template-rows de CSS Grid para definir el tamaño de las columnas y filas de una cuadrícula. Permite establecer un tamaño mínimo y máximo para los elementos de la cuadrícula en función del espacio disponible. |
.grid-container {
display: grid;
grid-template-columns: minmax(100px, 1fr) auto auto;
}
| En este caso, la primera columna tendrá un ancho mínimo de 100px y se expandirá para ocupar cualquier espacio disponible más allá de ese mínimo. Las otras dos columnas se ajustarán automáticamente para ocupar el espacio restante. |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) | En este ejemplo, se crea una cuadrícula con columnas que tendrán un ancho mínimo de 200px y se expandirán automáticamente (hasta ocupar un espacio igual) para llenar el contenedor. |
| auto-fit | Similar a auto-fill, esta función también crea tantas columnas como puedan caber en el espacio disponible. Sin embargo, a diferencia de auto-fill, auto-fit colapsará las columnas vacías para que no ocupen espacio innecesario. |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) | En este ejemplo, las columnas se expandirán para llenar el espacio disponible, pero si hay columnas vacías, se ajustarán automáticamente para aprovechar mejor el espacio. |
| grid-template-areas | Se utiliza para nombrar áreas en una cuadrícula. Esto puede ser útil para colocar elementos en la cuadrícula o para hacer referencia a áreas específicas de la cuadrícula en CSS para posicionar los elementos en esas áreas mediante referencias a los nombres. |
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 2fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
| En este ejemplo, hemos definido un diseño de cuadrícula con 3 filas y 3 columnas, y asignamos nombres de áreas a cada celda. Luego, puedes asignar elementos a estas áreas utilizando la propiedad grid-area. |
| grid-area | Se utiliza para especificar en qué área de la cuadrícula debe colocarse un elemento. Esta propiedad permite posicionar y dimensionar elementos dentro de una cuadrícula de manera más específica y flexible. |
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
| Ahora, cada elemento se coloca en la posición definida por su área correspondiente en el diseño de cuadrícula:
El elemento con la clase .header se coloca en el área llamada "header".
El elemento con la clase .sidebar se coloca en el área llamada "sidebar".
El elemento con la clase .content se coloca en el área llamada "content".
El elemento con la clase .footer se coloca en el área llamada "footer". |
Comentarios