Las propiedades grid-template-rowsy grid-template-columnsson las propiedades CSS principales para establecer un diseño de cuadrícula, una vez que el elemento es un contexto de cuadrícula ( display: grid;).
También hay -ms-grid-columnsy -ms-grid-rows, que son la antigua versión de IE de este. Es posible que desee considerar el prefijo automático para obtenerlos, o no, su llamada. También hubo un período extraño en el que estaban grid-definition-columnsy grid-definition-rows, pero eso ya no es nada.
Aquí hay un ejemplo derivado de la documentación de Microsoft:
.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )Esto define el número de filas / columnas en la cuadrícula, así como su dimensión.
Estas dos propiedades admiten una lista de valores separados por espacios. Cada valor definirá una nueva columna / fila estableciendo una dimensión. Una lista de 4 valores dará como resultado 4 columnas / filas. Un solo valor producirá una sola columna / fila.
Los valores aceptados incluyen la longitud (como pxo em), porcentajes, fracciones ( fr; véase más adelante), auto(o fit-content), min-content, max-content, y minmax(), o la repeat()función.
En el ejemplo de código anterior, eso significa:
- Columna 1 ( palabra clave automática ): la columna se ajusta al contenido de la columna.
- Columna 2 ("100 px"): la columna tiene 100 píxeles de ancho.
- Columna 3 (“1fr”): la columna ocupa una unidad de fracción del espacio restante.
- Columna 4 (“2fr”): la columna ocupa dos unidades de fracción del espacio restante.
- Fila 1 (“50 px”): la fila mide 50 píxeles de alto.
- Fila 2 (“5em”): la fila mide 5 ems de altura.
- Fila 3 ( palabra clave de contenido mínimo ): la fila es tan pequeña como lo permita el contenido.
- Fila 4 ( palabra clave automática ): la fila se ajusta al contenido de la fila.
repetir()
La repeat()función ha sido diseñada específicamente para este módulo. Te permite definir un patrón repetido X veces. Al igual repeat(6, 1fr);. Digamos que desea hacer 12 columnas de igual ancho espaciadas entre sí por un margen del 1%; podrías definir 1fr repeat(11, 1% 1fr). Es lo mismo que 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.
La unidad fr
La frunidad se puede utilizar para valores grid-rowsy grid-columns. Significa "fracción de espacio disponible". Piense en ello como porcentajes de espacio disponible cuando haya eliminado columnas / filas de tamaño fijo y basadas en contenido. Como dice la especificación:
La distribución del espacio fraccional se produce después de que todos los tamaños de filas y columnas de 'longitud' o basados en contenido hayan alcanzado su máximo.
Relacionado
Nuestro mejor recurso para todo lo relacionado con la cuadrícula CSS es nuestra Guía completa de cuadrícula CSS.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 57 | 52 | 11 * | dieciséis | 10.1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10,3 |