Cómo Utilizar Tamaño de Pista Implícita en Su Grid CSS

Hasta ahora nuestros tutoriales CSS grid han centrado en gran parte en valores explícitos – track tamaños que hemos definido explícitamente. Hemos utilizado las filas que son 200px alto, o tal vez las columnas que son 1fr amplia y explícitamente hemos indicado cómo muchos de ellos nos quieren. Pero ¿qué pasa si no sabemos (o no quieren comprometerse a) ¿cuántas pistas que queremos? Es donde valores implícitos entran en juego – vamos a tomar un vistazo.

Motor de Arranque Red

Aquí es una cuadrícula básica que puede bifurcar a seguir. Nos da un contenedor de rejilla, con 9 elementos de la red. No anchos de columna o cantidades se han definido todavía, por lo que la anchura máxima disponible llena cada elemento:

Definición de una Columna

Imaginemos que queremos una columna de la izquierda, y que sabemos exactamente lo ancho que queremos: 300px. Podemos definir que agregando grid-template-columns: 300px; nuestro contenedor de rejilla. Pero no se dan otras columnas a menos que explícitamente definen:

Es decir, a menos que explícitamente dicen queremos que uno de los elementos de red que se colocará en la columna 3 (por ejemplo) en la fila 1:

1

.item-3 {

2

  grid-column: 3;

3

  grid-row: 1;

4

}

Luego nos da columnas extras fuera de nuestra red definida porque CSS Grid utilizará el espacio disponible y su algoritmo de auto-colocación para averiguar donde va todo lo demás.

Esto es genial, y Grid hará suposiciones incluso si queremos tener más columnas, sin nosotros tener que definir cada uno. Pero ¿qué pasa si queremos que las pistas, sin embargo son muchos, a tener una anchura específica? Es donde grid-auto-columns entra en juego.

Dile "Hola" a grid-auto-columns

Si queremos que todas las columnas además el primer ancho de 100px, podríamos implícitamente afirmamos:

1

grid-auto-columns: 100px;

Junto con nuestro valor explícito, tenemos lo mejor de ambos mundos. Aquí estamos diciendo que queremos que la primera columna que 1fr (que toma una fracción de cualquier espacio es izquierda – auto tendría el mismo efecto aquí) y que las otras columnas que deben ser 100px precisamente:

1

grid-template-columns: 1fr;

2

grid-auto-columns: 100px;

Esto nos da lo siguiente:

Y si afirmamos que artículo 3 debe colocarse realmente en columna 5, fila 1, rejilla sabe lo ancho para hacer las columnas adicionales porque se implica.

No estamos limitados a valores de los píxeles aquí podríamos utilizar la fracción, unidades em, incluso la notación de minmax() que hemos analizado en anteriores tutoriales.

Sin olvidar grid-auto-rows

Casi huelga decir que grid-auto-rows hará lo mismo para las filas como grid-auto-columns para las columnas. Aquí es un ejemplo, donde todas las filas, pero los dos primeros son fijos a una altura de 200px.

Conclusión

Muchas de las propiedades de la cuadrícula tienen valores por defecto que se ven después de que en caso de no definir nada diferente, pero en algunas ocasiones necesitamos implicar por lo menos lo que queremos. Con tamaño de pista implícita podemos implica qué tamaño deben ser cualquier extras filas o columnas, si alguna vez es necesario.

Leer Más

• Especificaciones Tamaño de Pista Implícita