Muy Buenas las tengan y si no… pues hay que ir al Gym! 😄
Hola a todos, aqui con mas información sobre CSS Grids para un mejor soporte con el curso.
Hoy les tengo un breve tema que resultara un poco interesante ya que ayuda a que podamos definir como se comportan las celdas dentro de nuestro sistema de grillas.
Opinión: Aclaro de una vez que para MÍ no me resultaria muy util utilizar estas opciones ya que es preferible que las celdas tengan un ajuste automatico de acuerdo al sistema y al contenido de las mismas, solo para aclarar mi opinion respecto a este tema, que de igual forma no va faltar en algun momento en el que realmente lo necesitemos 😄 .
Bueno, empezemos!
Ustedes dirían, hay pues que facil esta todo el tema, pero quisiera hacerle unos pequeños ajustes a las celdas, pues vamos a ponerles un ancho y otras cosas!!
Pero que creen?, el mismo sistema nos permite colocar anchos y altos de manera casi automatica a todas las filas y columnas que queramos.
OJO: Este tema funciona de manera general, me explico, esto afecta a todas las columnas y filas!
Pues bien vamos a lo que queremos definir:
–Aqui tenemos 2 estilos propios del sitema de grillas:
grid-auto-columnsgrid-auto-rows
Pero, para que sirven esas cosas?
Bueno como ya dije antes, sirven mas que nada (y creo que solo para eso) para colocar tanto un ancho en especifico a las columnas y un alto a las filas, aclaro tus ideas:
.grid-container{
display: grid;
grid-auto-columns: 130px;
grid-auto-rows: 60%;
}
Bien, deja te lo desmenuso:
–Cada estilo funciona con 4 valores:
1.- Auto: Este es el valor por default y asigna una anchura automatica a las celdas dependiendo del “grid-container”.
2.- max-content | min-content: esto refleja que el tamaño de las celdas se determinara por el elemento mas grande enla columnas, que quiero decir, que si una selda tiene tamaño de 80px y las demas celdas en la columnas tienen 50px, va a tomar como referencia el tamaño de la mas grande.
3.- Valor especifico: aqui podemos colocar un valor directo o especifico de la columna entera ya sea en pixeles, porcentaje, ems, etc…
Ejemplo:
.grid-container{
display: grid;
grid-auto-columns: 130px;
}
Con esta propiedad en lugar de tener esto:
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
Ahora tendremos esto:
|-------|-------|-------|-------|
| x | x | x | x |
|-------|-------|-------|-------|
| x | x | x | x |
|-------|-------|-------|-------|
| x | x | x | x |
|-------|-------|-------|-------|
| x | x | x | x |
|-------|-------|-------|-------|
Muy facil de entender no?
Y que te cuento, para las “grid-auto-rows” es la misma cancion pero puesta en reversa!
Ejemplo:
.grid-container{
display: grid;
grid-auto-rows: 45%;
}
Y en lugar de tener esto:
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
Tendremos esto:
|---|---|---|---|
| | | | |
| x | x | x | x |
| | | | |
|---|---|---|---|
| | | | |
| x | x | x | x |
| | | | |
|---|---|---|---|
| | | | |
| x | x | x | x |
| | | | |
|---|---|---|---|
| | | | |
| x | x | x | x |
| | | | |
|---|---|---|---|
Muy Bien 😄
Ahora entiendes perfecto el como utlizar las propiedades de “grid-auto-columns” y “grid-auto-rows”.
Super NOTA: Ahora sabiendo esto, tienes que saber esto otro punto muy importante: Recuerdas la propiedad “grid-template-column” y “grid-template-row” de las que te hable en un tema pasado?, Bien, pues aquella propiedad va a SUSTITUIR por completo esta ultima propiedad, entiende que si usas “…-template-…” ya no puedes usar “…-auto-…”.
Como ya te mencione antes no puedes usar las dos juntas por que una sobreescribe a la otra!
Te doy unos tips:
–Si Usas “grid-template-…” ya no debes preouparte tanto por anchos y posiciones de celdas ya que se organiza el sistema de grillas con solo esa propiedad! por que defines cuantas filas abra en total y cuantas columnas y como se organizaran.
–Si usas esta ultima propiedad que te acabo de enseñar en este tema, tendras que hacer uso de varios estilos de “ACOMODO DE CELDAS” que es un tema que ya te deje anteriormente.
Perfecto 😄
Eres libre de elegir tu camino, auque basicamente luego tienes que combinar todos los estilos, pero bueno!
A seguir estudiando mi compa!!
Saludos.
Lenin Felix.
