Hoy vas a aprender y vas a amar y te va a gustar y lo vas a entender y lo vas a abrazar y nunca más volverás a llorar en la almohada por culpa de Grit porque lo vas a entender.
Hoy vas a entender Grit, te lo digo yo, que lo vas a entender.
Porque está increíble la potencia, la de cosas que puedes hacer con Grit y no puedes dejar la oportunidad de entenderlo, de abrazarlo para que de esa forma puedas maquetar páginas web en condiciones.
Así que la semana anterior hicimos Flexbox, que ya lo explicamos, y hoy vamos con Grit.
Pero también te voy a explicar las diferencias un poquito que hay entre uno y otro.
Bueno amigos, Codenver va a empezar mañana porque hoy no he tenido tiempo.
Entonces mañana arrancamos Codenver, arrancamos mañana Codenver y lo desbloquearemos en vivo y en directo mientras estamos streameando.
Porque mañana vamos a abrir la plataforma de Codenver donde vais a tener retos, retos secretos del mundo de la programación, retos de programación que podréis resolver con cualquier lenguaje con el que queráis y que va a tener un montón de sorpresas.
Pero no os lo perdáis porque vais a tener retos todo el mes de noviembre.
Nuevos retos cada semana.
He desarrollado páginas y nunca he utilizado Grit.
Siempre utilizo Flex, así que sería bueno aprender un poco de Grit.
Haces bien, es bueno aprender Grit.
Y es que, a ver, Flex es genial, está muy bien, es maravilloso, es maravilloso.
Pero vais a ver que hay cosas que no se pueden hacer fácil con Flex.
Y que hoy vais a entender de, ostras, pues con Grit se puede hacer con esto mucho más fácil, ¿no?
Una cosa que se suele hacer mucho en maquetación web que es los resultados de una búsqueda.
Y vais a aprender hoy cómo hacer resultados de una búsqueda responsive súper fácil en muy pocas líneas de código y lo vais a entender, que es lo mejor.
Se pueden combinar, por supuesto, se puede combinar Grit con Flex sin ningún tipo de problema, ¿vale?
Un elemento no puede tener los dos a la vez, el mismo elemento, pero sí que se puede hacer que dentro de cada elemento uno utilice Grit y dentro tengas Flex.
De hecho, si queréis, lo miramos ahora en un momentito.
No hay uno que sea mejor que el otro, ¿eh?
Esto es un error muy común donde la gente se cree que Grit es más avanzado que Flex o que uno es más nuevo que el otro y entonces es mejor, es más recomendable utilizar Grit que Flex.
Son diferentes, literalmente son diferentes.
Y luego os lo comento por qué son diferentes, pero el resumen fácil y rápido es que Flex es unidimensional, o sea, siempre estamos hablando de una dimensión, filas o columnas, y Grit estamos hablando de bidimensionalidad, que son filas y columnas, ¿ok?
Así que ahí tenéis la diferencia clave, importantísima.
Claro, si utilizáis Tailwind puedes utilizar Grid, Grid Calls 2, pero aún así eso sería para tener dos columnas.
Pero es que vais a ver que lo que vais a aprender hoy lo vais a poder utilizar con Tailwind también, porque al final Tailwind es SSS.
Y además hay cosas que Tailwind no te soluciona, porque eso que dice Nefesh, eso es muy simple, el hecho de hacer dos columnas y ya está.
Pero hay veces que hoy lo vamos a ver, por ejemplo, este tipo, este tipo de diseño, que son los ventos que están muy, pero que muy, muy, muy de moda.
Estos ventos, hay algunos que no los vais a poder hacer tan fácil como esperáis en Tailwind, porque justamente no os dan las herramientas.
Pero si sabéis SSS, sí que lo vais a poder hacer con Tailwind sin ningún tipo de problema.
Estos, por ejemplo, son los que utiliza Apple.
Esto, esto que veis aquí, esto se puede hacer bastante fácil con Grid y vamos a intentar daros las herramientas para que podáis crear el que os dé la gana,
para que no tenéis ningún problema de hacer esto, que esto lo podéis hacer con CSS facilísimo.
Las clases de la semana pasada del curso de CSS las tenéis en mi canal de YouTube secundario y vamos con nuestra herramienta favorita, que es Codilink.
Vale, la semana pasada nos quedamos aquí utilizando Flex e hicimos un montón de cosas raras.
Todo esto lo vamos a, lo vamos a quitar, ¿vale? Porque no lo vamos a necesitar.
Entonces, por ahora todo esto lo quitamos, pum, y vamos a quitar también todo esto y por ahora vamos a dejar aquí, no sé si poner un container, ¿vale?
Un container. Y ahora empezaremos por aquí estas cosas.
Antes de nada, vamos a definir qué es Grid.
¿Para qué sirve Grid? ¿Cómo funciona Grid? ¿Y de qué estamos hablando con Grid?
A ver, Grid básicamente voy a enseñaros una imagen que... Ah, bueno, mira, me sirve esta imagen, por ejemplo.
Estoy seguro que habréis visto imágenes como esta, como esta, que tenéis un layout donde queréis poner, pues arriba queréis el header,
en un lado la navegación, abajo queréis poner el footer, pero aquí tenéis una car, aquí otra, o tenéis los resultados de una búsqueda,
por ejemplo, los resultados de una búsqueda donde queréis que están una al lado de la otra,
o lo que queréis es hacer un Vento, un Vento Grid de estos.
Vento es esta maquetación nueva en la que tú puedes poner como columnas y cada columna tiene una altura diferente, por ejemplo.
Estos son tres columnas, como podemos ver, tres columnas y tiene tres filas.
Lo que pasa es que este cajón, este cajón, fíjate que ocupa dos filas.
En cambio, tenemos aquí algunas cars que solo ocupan una, así que ya queremos hacer una diferenciación de que algunas ocupen más que otras.
Y esto lo vamos a poder lograr con Grid.
Esto de poder tener una cuadrícula que podamos controlar en dos dimensiones cómo se van a comportar las cosas,
este sistema de maquetación bidimensional es lo que hablamos de Grid, ¿ok?
Una cuadrícula con un conjunto de líneas tanto horizontales como verticales que al final hacen intersección
y aquí podemos tener elementos.
Y estos elementos pues pueden tomar una sola columna, dos columnas, tres, cuatro filas, lo que sea.
Y siempre pues que respete el conjunto.
¿Cuál es el diseño de CSS? ¿Por qué es tan importante Grid? ¿Por qué le da miedo a la gente?
¿Le da miedo a la gente porque Grid se enseña mal?
No, hay muchos sitios donde se enseña bastante bien.
De hecho, os voy a recomendar, como siempre os recomiendo, un recurso que os va a encantar,
que está muy chulo, que es el de mi amigo Manz, ¿vale?
Que está muy bien explicado, que podéis ir y le podéis dar cañita.
Tiene un montón de ejemplos y tal, que lo explica súper bien y eso, ¿vale?
Así que le podéis echar un vistazo, que además tiene un montón de dibujitos
y así lo podéis acompañar con todo este tipo de cosas.
Y luego además, además, al final del curso de hoy, os voy a recomendar el juego típico que siempre se hace,
que es este, el Grid Garden.
El juego de Grid Garden es un juego que tiene 28 niveles donde vais a poder poner en práctica
todo lo que vais a aprender en la clase de hoy.
Y así os aseguráis ya de que habéis dominado Grid perfectamente.
Este juego es bastante divertido y lo que tenéis que hacer es aseguraros
pues que las cosas estén en su sitio correcto.
Por ejemplo, las zanahorias tienen que estar aquí y esto no tiene que estar ahí,
tienes que mover las cosas, está muy chula, ¿vale?
Y así que para aprender lo que necesitas, yo te lo voy a explicar hoy aquí.
Entonces ya sabemos Grid, ¿no?
Pero uno de los problemas que tenemos con Grid es
¿cuáles son las características concretas, no?
Sí que te he dicho que es una cuadrícula, pero tienes que saber
que los elementos pueden tener tamaños fijos o flexibles.
Que podemos posicionar elementos en cualquier sitio de la cuadrícula.
Esto quiere decir que un elemento no tiene por qué seguir el orden estricto típico
que siempre vemos de arriba, abajo, izquierda, derecha,
sino que el primer elemento lo puedes poner el último
y todo lo demás vacío.
O el último lo puedes poner el primero y que ocupe la mitad, ¿vale?
Lo puedes poner donde quieras.
Además, los elementos se van colocando en esta cuadrícula
y, importante, se pueden poner elementos superpuestos.
Esto quiere decir que tú puedes poner un elemento encima de otro.
Que esto es algo que normalmente no se puede hacer en todos
y necesitas utilizar Position Absolute, que lo vimos en clases anteriores.
Bueno, pues en Grid esto es como una excepción
porque sin utilizar Position Absolute puedes poner un elemento encima de otro.
Veremos un ejemplo después porque es muy interesante
porque mucha gente cree, de forma errónea,
que solo se puede lograr con Position Absolute.
Y no es cierto.
También lo puedes utilizar con Grid totalmente fácil.
La diferencia clave, ¿vale?
La pregunta del millón que todo el mundo se hace siempre.
Bueno, ¿cuál es la diferencia entre Flex y Grid?
¿Por qué debería utilizar uno?
¿Por qué debería utilizar otro?
¿Cuál es mejor?
Pregunta errónea.
Porque no hay nada que sea mejor que lo otro.
Todo depende del contexto.
A ver, Flexbox es un sistema de maquetación unidimensional.
Es decir, que solo nos permite trabajar en un eje, filas o columnas.
Y la diferencia básica entonces es que Grid, como ya he dicho,
nos permite trabajar en los dos ejes, filas y columnas.
Así que en Flex vamos a tener que elegir uno de los dos
y en Grid vamos a poder utilizar los dos.
¿Es mejor uno que el otro?
No.
Simplemente si tú tienes un diseño bidimensional
que vas a tener que pensar tanto en filas como en columnas,
vas a querer seguramente utilizar Grid, ¿vale?
Y de hecho vas a ver que Flex y Grid comparten muchas especificaciones
a la hora de alinear y justificar elementos, contenedores, contenido y todo esto.
Así que si has aprendido Flex, muchas de las cosas que ya sabes
te van a servir para Grid.
Así que simplemente es eso.
Ahora me diréis, bueno, pero entonces, pues para eso utilizo siempre Grid.
Tampoco hace falta.
Porque hay veces que no hace falta que tengas columnas.
Por ejemplo, imagínate que tú lo único que quieres,
en este caso, aquí claramente tenemos dos columnas, tenemos tres filas
y aquí vamos a querer utilizar Grid porque te va a simplificar mucho.
Hacer esto con Flex es mucho más complicado
porque el tener que poner esto, luego que esto esté arriba
y esto se quede abajo, que esto no se quede...
Y que esto además en Flex sea responsive, va a ser mucho, mucho más complicado, ¿vale?
Si lo intentas hacer con Flex.
En cambio con Grid va a ser mucho más fácil.
Ahora bien, si fuese que tienes una sola línea, ya sea de filas o de columnas,
al final lo que tendríamos aquí directamente y será mucho más fácil
sería hacerlo con Flex.
Entonces, una sola dimensión, Flex.
Bidimensión, Grid.
Punto pelota.
Por eso, si solo tienes una dimensión, no te va a valer la pena utilizar Grid
porque a lo mejor te lo complica sin necesidad.
Entonces, no es que sea mejor o peor, sino que simplemente cada uno
está hecho para una cosa en concreto.
Vamos a crear un ejemplo básico.
Tenemos aquí un section con 7 elementos, que son dips, porque sé que os encantan los dips.
Vamos a estilar un poco esto para que lo veamos un poquito mejor.
Vamos a estilar el container, le ponemos un background de, yo qué sé, un color salmón.
Le ponemos aquí un borde que sea negro y esto será el contenedor, ¿vale?
El contenedor, fíjate, que tiene este borde color negro.
Le voy a poner un bar de radius, ¿vale?
Que creo que todavía no habéis visto el bar de radius, pero al menos para que lo tengamos.
Esto está funcionando de forma por defecto.
O sea, container ya sabéis que como es un section, tanto section como dip por defecto,
tienen el display, lo tienen como si fuese block, ¿vale?
Este sería el valor por defecto.
Y esto es lo que vamos a cambiar ahora.
Ahora, lo que vamos a hacer es que el container, todos los containers, el dip que tenemos dentro del container,
vamos a ponerle un light blue, ¿vale?
Y vas a ver que ahora mismo está rellenando todo el espacio del contenedor.
Tenemos también, vamos a poner acá un borde así que sea de color 0.9f y un borde radius, ¿vale?
De 6 píxeles, ¿vale?
Fíjate que cada uno de los elementos está ocupando totalmente el espacio.
¿Y esto por qué está pasando?
Porque ya vimos, ¿vale?
Ya vimos, sí, el salmón desapareció.
Pero ahí está, ahí está, ¿veis?
Aquí está ahí justo debajo.
Entonces, ¿qué es lo que está pasando?
Que con display block lo que está haciendo es ocupar todo el espacio y hace un salto de línea.
Esto sería el valor por defecto de lo que está ocurriendo, ¿no?
Vamos a empezar a crear nuestra primera cuadrícula, ¿vale?
Vamos a poner nuestra primera cuadrícula.
Voy a poner, para que esto no sea tan...
Vamos a poner que esto tenga un background con un poquito así, para que no sea blanco puro, que no moleste tanto, ¿vale?
Muy bien.
Vamos a empezar con el grid.
Voy a querer que mi contenedor, lo que tengamos de color negro, sea una cuadrícula.
¿Qué tenemos que hacer?
Pues tenemos que utilizar display y le ponemos que esto es un grid.
Anda.
Si no, no ha cambiado.
Sigue igual.
Menudo timo, menudo timo.
Ajá.
¿Ha cambiado o no ha cambiado?
Parece igual, ¿vale?
Parece igual.
Pero vamos a ver una cosa.
Fíjate, si tú abres este ejemplo y le das a inspeccionar, vamos a ver aquí.
No sé por qué me lo he abierto en otra ventana, pero vamos a ver aquí.
Que fíjate que ahora al lado de section tienes este botoncito de grid.
Y aquí ya, ojo, cuidado, que está trucazo.
Trucazo de las herramientas de desarrollo, ¿eh?
Fíjate que tenemos aquí este grid.
Si le das un clic, ojo, ya pasan cosas, ¿vale?
Le puedes dar un clic aquí, justamente que te indica si es un grid.
Y fíjate que le pone aquí como un montón de numeritos y no sé qué.
No te preocupes que hoy vas a salir conociendo, entendiendo, dominando estos numeritos.
Vas a saber qué son estos numeritos y vas a alucinar cómo de potentes son estos numeritos.
Pero por ahora quédate que al menos algo diferente tenemos.
Porque fíjate que si le quitas el display grid, esto desaparece.
No tenemos numeritos, si ponemos el display grid tenemos numeritos, ¿vale?
Así que algo, algo ha cambiado.
No lo suficiente, ¿no?
Pero tenemos numeritos.
¿Qué significa estos numeritos?
Estos numeritos al final lo que nos está indicando son las filas que tenemos en nuestra cuadrícula.
Visualmente ahora, ¿qué podríamos decir?
Que esta cuadrícula tiene una sola columna.
Una columna, ¿no?
Porque puedes ver que solo tiene una columna.
Y tenemos siete filas.
Una, dos, tres, cuatro, cinco, seis, siete.
Por defecto, lo que está pasando aquí es que nos está fluyendo el contenido, poniendo el contenido uno, cada uno de los elementos en cada fila, ¿no?
Eso es lo que está haciendo.
Está fluyendo el contenido así.
Está ocupando todo el espacio y lo está poniendo cada uno.
Pero yo lo que me gustaría, imagínate que quieres tener dos columnas en tu cuadrícula, ¿no?
Porque dices, ostras, que una columna es un poco rollo.
Yo lo que quiero es tener dos columnas.
Bueno, ¿cómo definimos que queremos tener dos columnas?
Ahora mucha gente diría, pues grid calls 2, porque esto es lo que hago en Tailwind.
Vale, pero ¿qué es lo que está haciendo Tailwind por detrás?
Lo vamos a entender y lo vamos a ver.
Tenemos que utilizar la propiedad grid template columns, ¿vale?
Y le vamos a indicar cuántas columnas queremos que tenga nuestra cuadrícula.
Y le tenemos que poner el espacio que tiene que utilizar cada columna.
Imagínate que queremos dos columnas de 100 píxeles, ¿vale?
Pues le vamos a decir una columna de 100 píxeles.
Fíjate que ya solo con esto ha cambiado, porque ¿qué es lo que está pasando?
Le estamos diciendo que nuestra cuadrícula tiene una columna de 100 píxeles.
Y ya nos ha puesto que esto sean 100 píxeles y lo está agrupando así.
Pero le podemos decir que tenga otra más de otros 100 píxeles.
Y fíjate lo que ha pasado.
Ahora tenemos dos columnas de 100 píxeles.
Y lo que está pasando es que los elementos se van a distribuir en esta cuadrícula de izquierda a derecha y de arriba a abajo.
Eso es porque nosotros leemos así, ¿vale?
Pero ya vimos la semana pasada, ¿vale?
Que la dirección en la que se distribuyen los elementos es importante dependiendo de cómo es la dirección de lectura para cada uno de nuestros usuarios.
Para nosotros que somos latinos, pues para nosotros es así.
Pero tened en cuenta esto, que no está bien decir de arriba a abajo, izquierda a derecha.
Porque en todos los sitios es así.
Es según la dirección de lectura.
Ahora bien, imagínate que quieres añadir un tercero.
Pues no pasa nada.
Otros 100 píxeles y ahora tenemos tres columnas y cada columna es de 100 píxeles.
Y se distribuye el contenido así, ¿vale?
También podemos utilizar otros valores.
Por ejemplo, podríamos utilizar el valor de auto.
¿Qué es lo que hace el valor de auto?
Fíjate que el de auto lo que ha hecho es ocupar un poquito más que el otro.
Y aquí le podemos decir que ese solo sea 20 píxeles y la tercera columna sea de 100.
Así que tenemos que la primera columna son automático, que ahora te explicaré lo que es.
La segunda son 20 píxeles y la tercera son 100 píxeles.
¿Vale?
¿El auto qué quiere decir?
Auto es automático.
Pero auto lo que quiere decir exactamente es que el navegador es el que va a decidir cuál es el espacio que tiene que utilizar
y lo va a hacer dependiendo del espacio que hay disponible y del contenido, que esto es importante, según el contenido del texto.
Aquí lo que está ocurriendo es que como tenemos dos fijos, claro, este seguro es de 100, este seguro es de 20,
y ha dicho, bueno, pues este como es auto, utilizo el resto y ya está, mucho más fácil.
Pero si tienes dos que son auto, aquí sí que va a ser un poquito más complejo, ¿no?
Porque podemos decir, vale, este es de 20 píxeles, pero este es automático y este es automático.
Pero claro, si son automáticos, fíjate que según el contenido que hay dentro, pues claro, como tiene más contenido, va a decir el navegador.
Ah, claro, como este tiene más contenido, me ha dicho que es automático, voy a hacer que sea más ancho, que ocupe más espacio esta columna,
que la segunda que necesita menos, ¿vale?
Entonces, fíjate, y esto es importante porque mucha gente se cree que el automático, automáticamente, siempre va a tener el mismo espacio.
Y no es así, ¿vale? No es así.
Entonces, ya hemos visto que podemos ir combinando diferentes valores y tenemos el automático, tenemos los píxeles y tenemos obviamente más, ¿eh?
Tendríamos, podríamos, si lo ponemos todo en auto, auto, auto, va a utilizar siempre según el contenido, esto perfecto.
Y también podemos mezclar y hacer, por ejemplo, vamos a hacer ahora cinco columnas, vamos a quitar esto, vamos a poner cinco columnas.
Y le podemos decir que la primera columna sea con porcentajes, que la segunda sea con píxeles, que la tercera sea automática y que la cuarta sean 10 puntos del viewport, ¿vale?
O sea, un 10% del viewport, del ancho del viewport.
Y lo tendríamos así, fíjate, ahora tenemos cuatro columnas donde cada columna, esta primera columna es un 50% del contenedor, el 2, este ocupa 100 píxeles,
el tercero es automático y el cuarto son un 10% del ancho del viewport, ¿vale?
O sea, que ya veis que podéis mezclar unidades sin ningún tipo de problema.
No es lo normal, lo habitual, ni lo aconsejable, ¿vale?
Ni lo aconsejable, porque al final aquí la podéis liar muy parda, ¿eh?
Pero bueno, no os preocupéis que esto lo iremos viendo de cómo lo podemos arreglar.
Sobre todo, porque ahora vamos a explicar una unidad especial.
Y es que hay una unidad especial y específica que solo funciona con grid y es la de fracción.
¿Qué significa fracción?
Bueno, vamos a poner aquí en Grid Template Columns, fijaos que tantos valores como ponéis son el número de columnas que vamos a tener aquí.
Tenemos cuatro valores, por lo tanto tenemos cuatro columnas.
Y automáticamente, fíjate, que me ha generado otra fila.
O sea, porque lo que está intentando es fluir los elementos y si no caben, pues ya a la siguiente fila.
Vale, ahora, si yo quito esto y le pongo 100 píxeles, una sola columna de 100 píxeles.
Pero vamos a utilizar las fracciones.
¿Qué es una fracción?
Es una unidad especial que nos permite indicar el tamaño de las columnas de forma proporcional.
¿Proporcional a qué?
Bueno, se llama FR, ¿no?
Si le ponemos una fracción, fíjate que ha ocupado todo el espacio.
¿Por qué?
Porque una fracción por defecto, si no tiene nada más, va a ser el 100% del espacio, ¿no?
Una fracción, si tiene que ocupar una fracción y no hay más columnas, es el 100% del espacio.
Pero, ¿qué pasa?
Que si tenemos dos columnas y cada una tiene una fracción, ¿qué significa esto?
Pues que, claro, si el 100% lo divides entre dos, vamos a tener que cada columna es una fracción.
Y, por lo tanto, cada fracción tiene que ser del 50%.
Va a ser mitad y mitad.
Si tenemos tres, pues esto lo que va a decir es que es un tercio.
Una fracción, como hay tres fracciones en total, cada columna va a ser una fracción.
Por lo tanto, va a ser un 33,33%.
Y estas fracciones no solo puedes utilizar una fracción.
Imagínate que solo quieres dos columnas, ¿vale?
Pero quieres que la primera sea una fracción y la segunda columna sea el doble.
Pues haces dos fracciones.
Y fíjate lo que hemos hecho aquí.
La primera columna tenemos que es una fracción y la segunda columna es el doble de la primera columna.
Lo que estamos consiguiendo de aquí es que haya algún estilo de forma relativa
de decir que queremos que una columna sea el doble de la otra.
Y, ojo, no tenéis que utilizar como forma base una fracción.
Podéis decir, estos son dos fracciones y estas son cuatro.
Vamos a conseguir lo mismo, pero fíjate que lo que estamos diciendo es que estas son dos fracciones
y estas son cuatro, es el doble.
Y podríamos añadir otra que fuese una fracción.
Y lo que está pasando aquí es que tendríamos que dividir, ¿no?
Aquí tenemos dos, cuatro y seis, serían cien entre seis y una fracción sería justamente esta división.
Y así sabríamos perfectamente a qué se refiere cada una.
Así que esto es la clave cuando trabajemos con grid, el conocer las fracciones.
Fracciones, porque las fracciones lo que significa es cómo tenemos que separar todo el espacio
y va a depender de cuántas columnas tengáis, ¿vale?
Fíjate, ah, que lo he contado mal, era siete, perdón, que he dicho seis.
Era cien entre siete, perdón, que me equivoqué.
Entonces, voy a volver a explicar lo de las fracciones porque es muy importante, ¿vale?
Una fracción, si solo tenemos una columna y es una fracción, esto va a ser un cien por cien, ¿no?
Si tenemos dos columnas y cada columna es una fracción, cada columna va a ser un cincuenta por ciento.
Fíjate en una cosa, si decimos que una columna es una fracción y la otra son cien píxeles,
entonces, ¿cuánto va a ser cada una?
Pues, muy fácil.
Hemos dicho que empezamos con el cien por cien, ¿no?
Empezamos con el cien por cien y tenemos que una columna, esta columna, la segunda,
que es esta que tenemos aquí, son cien píxeles.
Pues cien por cien menos cien píxeles, lo que tengamos aquí va a ser el ancho que va a tener la fracción, ¿vale?
Porque va a ser el resto, ya está.
Así de fácil, o sea, lo que vamos a tener es esta columna que es una fracción,
va a ser el resto del cien por cien menos los cien píxeles, ¿vale?
Y ahí lo tendríamos.
El texto no influye porque da igual lo que tengamos dentro, al final es una fracción de las columnas que tenemos, punto pelota.
No importa ya el contenido que tengamos porque eso solo sería con el auto.
Así que, básicamente, lo que no esté ocupado, efectivamente.
Así que, lo mismo si hacemos una tercera columna.
Así que, una fracción será cien por cien menos cien píxeles menos, bueno, vamos a poner cincuenta píxeles para lo entendamos mejor, ¿vale?
Y esto sería una fracción, ¿ok?
Así lo tendríamos.
Es más cómodo escribir la fracción que un porcentaje porque así te evitas de calcularlo.
Claro, es mucho más fácil porque imaginad que lo queréis hacer así.
Esto sería lo mismo que escribir una fracción y una fracción.
Sería lo mismo visualmente.
Pero claro, esto es un cálculo bastante fácil y que lo tenéis bastante claro.
Pero imaginad que tenéis cinco columnas y tenéis que estar pensando y dividiendo mentalmente cómo tiene que ser cada cosa y tal.
¿Qué pasa con una sola columna si son dos fracciones?
Buena pregunta, ¿no?
No pasa absolutamente nada.
Si yo le pongo aquí que tiene un millón de fracciones, ¿cuántas columnas hay?
Solo hay una columna, ¿no?
Solo hay una columna.
Entonces, el cien por cien son estas fracciones.
Ya está.
Porque solo tiene una columna.
El tema es cuando tiene más de una que entonces hay que empezar a calcular.
Pero si solo hay una columna, da igual cuántas fracciones pongas que son.
Porque si solo indicas que mil fracciones es una columna, pues ya lo tendrías.
Ya lo tendrías hecho.
Así que las fracciones lo importante es cuando queremos dividir, por ejemplo, entre tres.
Pues aquí, el cien por cien, dividimos entre tres fracciones, 33,3.
Pensad en pizzas, que muchas veces es mucho más fácil y ya lo tendréis.
Pero lo importante es cómo podemos fraccionar nuestro contenido para básicamente así de esta forma, sin necesidad de poner porcentajes, que funcione correctamente.
Así tenemos una fracción, una fracción y una fracción.
Y de nuevo podemos decir 200 píxeles, 200 píxeles y una fracción.
¿Veis aquí en este caso lo que pasa?
Que está saliendo.
Esto es normal, ¿eh?
Porque, claro, le estamos poniendo más espacio del que tiene.
Estamos obligándole que tenga como más espacio.
Y justamente por esto también vais a querer evitar muchas veces el poner anchos fijos.
Que esto lo vamos a ver después de cómo lo podemos arreglar para evitar este tipo de problema que hemos visto aquí.
Claro, le estoy diciendo, tenemos tres columnas.
La primera de 200 píxeles, la tercera de 200 píxeles y luego el resto.
Pero, claro, fíjate que el resto ya no le queda nada.
Así que está rompiendo el contenedor.
Esto veremos cómo lo podemos arreglar y vas a ver que es muy sencillo.
Bueno, vamos a poner dos fracciones.
O sea, tengo dos columnas y al final, pues 50% y 50%, por ahora ponemos dos fracciones y ya está.
Pero fijaos en una cosa.
Automáticamente lo que está ocurriendo aquí es que me está creando filas y las filas están tomando el alto que le da la buena, le dé la gana, ¿no?
O sea, me ha creado aquí filas, me ha creado una, dos, tres, cuatro filas, me ha creado.
Pero me los está haciendo con el ancho que le ha dado la gana.
El ancho que está utilizando, fíjate, que es que ha dividido el número de filas por el espacio disponible y lo ha rellenado y ya está.
Podríamos decir que ahora mismo en los rows tendríamos una fracción, una fracción, me lo he cargado.
Una fracción, una fracción y una fracción.
O sea, tenemos cuatro fracciones, cuatro filas y ya está.
Pero vosotros podéis cambiar también cómo queréis que sean las filas.
Podéis hacer lo mismo, grid template rows y decirle, quiero que la primera fila sean 100 píxeles, que la segunda sean 50 píxeles, que la tercera sean 25 píxeles o un poquito más, 30 píxeles y que la última sea 100 píxeles.
¿Vale? Y fíjate lo que hemos conseguido ya.
Y aquí justamente lo que empezamos a hablar muchas veces con el tema de el que sea bidimensional.
Y esto luego lo veremos cuando empecemos a crear un layout real de una página para que veáis cuál es la clave de todo esto.
Fijaos que lo que estamos haciendo es decirle, la primera fila es de 100 píxeles.
Por lo tanto, esta fila de aquí, de izquierda a derecha, tendría que ser de altura de 100 píxeles.
La segunda fila es de 50 píxeles.
Así que esta, como puedes ver, es más corta que la primera y es de 50 píxeles.
La tercera de 30.
Bueno, pues aquí tenemos esta más cortita y pone aquí que la cuarta de 100 píxeles y la tendríamos aquí.
¿Y qué pasa si le ponemos aquí otra de 50 píxeles?
Pues que la añade.
Ojo con esto que es un error bastante común.
Y es el hecho de que la gente cree que la cuadrícula se crea a través de los elementos.
Y no es así.
O sea, vosotros podéis tener una cuadrícula vacía.
Fijaos en esto.
Fijaos que he creado una fila aquí de 50 píxeles.
Podéis poner lo que dé la gana, ¿veis?
¿Y qué va a ocurrir con esto?
Pues lo podemos ver fácilmente en las herramientas de desarrollo.
Vais a ver que está la cuadrícula aunque no haya un elemento, ¿vale?
Si viráis aquí y le dais a grid, fijaos que cuando os ponéis encima, ¿vale?
Vais a ver cómo no se va a ver casi en el streaming, ¿vale?
Pero sí que se ven como unas rayitas, un borde ahí que no es sólido,
que te indica los elementos que deberían ir dentro de la cuadrícula,
aunque no haya un elemento dentro, ¿vale?
Importante.
Tú puedes tener una cuadrícula donde dentro no haya un elemento.
Y esto es un error muy común donde la gente dice, pero ¿por qué está este espacio?
¿Por qué está...?
Bueno, piensa en un Excel.
Cuando tenemos en Google Docs un Excel, piensa en esto.
Esto sería una cuadrícula, ¿vale?
Una cuadrícula básicamente en la que tendríamos aquí el hecho de que está totalmente vacía,
pero la cuadrícula ya la tienes hecha.
Donde tendrías aquí cada una de las cosas y puedes poner donde tú quieras, ¿vale?
Así que ten en cuenta esto.
Ten en cuenta que la cuadrícula puede estar vacía, pero puede estar creada.
Aunque tú no veas un elemento dentro, no significa que no pueda haber una cuadrícula.
Y aquí lo puedes ver claramente que hemos hecho...
Lo voy a hacer un poquito más pequeño para que lo veas.
Este espacio de 10 píxeles, eso en realidad, ese espacio, fíjate,
que tiene la cuadrícula ya preparada, ¿vale?
Así que ahí lo teníamos.
Ten en cuenta que puedes crear cuadrículas aunque no haya elementos dentro.
Importantísimo, ¿vale?
Y ahora que tienes esto ya clarísimo, vamos a ver qué hacemos con lo siguiente.
Porque antes te he comentado que, vale, podríamos cambiar esto.
Mira, lo podemos cambiar aquí con el template rows.
Si lo quitamos, genera filas de forma totalmente automática, ¿vale?
Ahora, ojo, porque también tenemos una forma de indicar fácilmente cuál es el tamaño
que tienen que tener las filas que automáticamente se generan.
Fíjate que yo aquí solo estoy diciendo, oye, quiero que mi plantilla de la cuadrícula
tenga dos columnas.
No le digo las filas, pero las está generando, ¿no?
Cuando no caben, genera nuevas filas.
Pues tenemos una propiedad que le podemos indicar, oye, cuando esta grid automáticamente
me cree filas, quiero que tengan una altura.
Y creo que la altura de todas las que genera sea de 200 píxeles, ¿vale?
Y ves el cambio.
Lo que estamos diciendo aquí de alguna forma es, oye, cada vez que tengas que generar
una fila automáticamente, quiero que tenga esta altura, que sea de 100 píxeles.
Le puedes poner lo que tú quieras.
Y fíjate cómo está cambiando la diferencia entre lo que tendríamos a nosotros indicarle
las filas que automáticamente se pongan.
Y ten en cuenta otra cosa.
Aunque tú tengas un template de las filas y le digas, la primera fila, quiero que sean
100 píxeles, ¿vale?
Y lo cierras.
Fíjate lo que va a hacer.
La primera fila, que es esta que tendríamos aquí, esta que tendríamos aquí, la primera
fila, le hemos dicho que sea de 100 píxeles.
Pero el resto de filas las ha tenido que generar.
Y por lo tanto, las ha generado automáticamente y ha dicho, bueno, voy a ver cuál es el tamaño
que me has dicho de las filas que tengo que generar yo.
Por lo tanto, de la primera que le hemos dicho, ha utilizado la de 100 píxeles.
Y como del resto no le hemos puesto, ha utilizado esta, ¿vale?
Así que esto es bastante importante a la hora de controlar cuando se generen nuevas filas,
qué es lo que tenemos que utilizar.
O sea, queremos que se vean de alguna forma, queremos que tenga algún tipo de tamaño,
lo podéis poner así, ¿vale?
Súper importante.
Se puede hacer igual en columnas, se puede hacer lo mismo en columnas.
Lo que pasa es que para las columnas, que lo veremos después, es que a la hora de cómo
se generan el autoflow, cómo se genera por defecto, ¿ves?
Por defecto se generan en filas.
Cuando algo no cabe, se generan en filas.
Este sería el valor por defecto, ¿vale?
El valor por defecto es que se generan filas.
Pero puedes ver que hay otras.
Por ejemplo, en columnas, ¿ves?
Y en columnas, fíjate lo que hace.
En columnas, al final, lo que hace es intentar meterlas todas en la columna.
O podrían meterlo denso, que esto lo veremos más adelante,
que lo que hace es rellenar los huecos con aquellos que puede.
Pero por defecto lo hace por rows.
Pero también lo podrías hacer con columnas, obviamente.
Lo que pasa es que tienes que cambiarle la dirección que lo harías, ¿eh?
Pongamos que voy a quitar esto.
Pongamos que tenemos aquí tres fracciones, ¿vale?
O mira, mejor.
Vamos a poner aquí 200 píxeles.
Vamos a hacer algo así.
Y lo vamos a hacer también.
Vamos a tener tres columnas, ¿vale?
Vamos a quitar aquí esto que lo había puesto como un poco...
Vamos a poner el 1, el 2 y el 3 así normal.
Vamos a tener tres columnas, 100 píxeles, una fracción, 50 píxeles.
Vamos a poner ahora que vamos a tener tres filas
y vamos a decir que sean 100 píxeles, 100 píxeles y 100 píxeles, ¿no?
Lo queremos así.
Bueno, esto normalmente es algo que vais a repetir mucho.
Cuando hacemos una cuadrícula, un problema que vamos a tener constantemente
es que vamos a querer repetir lo mismo una y otra vez.
O sea, por ejemplo, vais a querer las columnas que sea una fracción,
una fracción y una fracción, ¿no?
Tres veces estamos repitiendo lo mismo.
Y las filas estamos repitiendo tres veces lo mismo, ¿no?
Esto lo vais a ver repetido 10.000 millones de veces.
Y hay una función, un método que te permite simplificar esto,
que es el método de repeat.
¿Qué es lo que te permite?
Imagínate aquí que en este grid template columns le dices,
en lugar de tener que poner manualmente cuántas veces tiene que ser,
lo que puedes decirle es, oye, quiero que repitas tres veces una fracción, ¿vale?
Y esto es exactamente lo mismo a lo que hemos hecho.
Lo que estamos diciéndole aquí es que queremos tres columnas de una fracción.
Y aquí podríamos hacer exactamente lo mismo.
Oye, repite tres veces los 100 píxeles.
O incluso podríamos decirle, pues, que sean cinco veces.
Entonces, ahora me crearía cinco columnas de una fracción.
Lo bueno que tiene el repeat es que nos va a permitir muy rápidamente,
sin necesidad de estar todo el rato repitiendo lo mismo,
el hecho de escribir cuántas columnas queremos,
siempre y cuando sea exactamente el mismo valor.
Pero también se puede utilizar solo para una parte.
Y mira, y esto es una cosa que muy poca gente sabe.
Vale, el repeat, imagínate que quiero hacer que el primero sean 25 píxeles,
una fracción, una fracción, una fracción, ¿vale?
Algo así.
O sea, quieres que la primera columna, esta de aquí, sea un poquito más cortita,
que solo sean 25 píxeles, y estos sean tres veces una fracción.
Aquí hay mucha gente que se cree que entonces ya no puedo utilizar el repeat,
y he visto incluso PRs, que la gente a lo mejor había empezado con el repeat,
pero aquí como no se podía utilizar, pues lo quitaba, ¿no?
Pero sí que se puede.
O sea, hay que tener en cuenta que aquí, como estás repitiendo tres veces la fracción,
puedes hacer esto.
Repeat 3, 1, FR.
Y lo que tienes que tener en cuenta es que al final lo puedes utilizar solo para una parte.
Por ejemplo, imagínate que al final queremos utilizar,
que debemos crear una quinta columna, aquí a la derecha,
que sea también de 25 píxeles.
Pues lo puedes poner, y fíjate, la primera columna, 25 píxeles, que sea esta del 1,
luego tres veces una fracción, que sería la del 2, la del 3 y la del 4,
y finalmente la última columna, 25 píxeles.
Incluso, y a ver, esto lo habéis pillado porque esto está bastante chulo,
y al final mucha gente se cree que no se puede hacer,
y el tema es que con esto tenemos cinco columnas.
La primera de 25 píxeles, tres veces una fracción, porque estamos utilizando el repeat,
y luego una quinta columna de 25 píxeles.
¿Sí? ¿Esto entendido? Perfecto.
Vale.
Es como si fuera una función que hace un splice.
Es como si fuera una función que básicamente te cambia esto por esto.
¿Vale? Es como lo mismo.
Esto, mira, lo voy a hacer para que lo veáis más claro.
Es básicamente que cuando ve esto, esto lo cambia por esto.
¿Vale?
Es una equivalencia.
Perfecto. Ahí está.
Pero espérate porque hay otra cosa todavía mejor a esto.
Y es el hecho de, imaginad que queréis que sea 25 píxeles, 100, bueno, 50 píxeles, 25 píxeles, 50 píxeles.
¿Vale?
Y 25 píxeles.
Y 50 píxeles.
Algo así.
¿Vale?
Queréis que sea la primera 25 píxeles, la segunda 50, la tercera 25, la cuarta 50, la quinta.
Entonces ya veis que se está repitiendo algo, ¿verdad?
¿Veis que se está repitiendo un patrón tres veces?
Se está repitiendo 25, 50, 25, 50, 25, 50.
Se está repitiendo tres veces.
Pues esto también se puede hacer con el repeat.
Otra cosa que muy poca gente sabe.
Entonces se puede hacer esto y le puedes decir, quiero que esto lo hagas tres veces.
Y veis, está quedando exactamente igual.
Está diciendo, quiero que tres veces me pongas la primera y la segunda columna.
¿Vale?
Así que ya veis que también es mucho más potente de lo que parece que también podéis utilizar esto.
¿Es normal poner tantas columnas?
¿Es normal?
Claro que sí.
Claro que puede ser que tengas tantas columnas.
O sea, por ejemplo, en Google, ¿cuántas columnas ves aquí?
Claro, es que vosotros muchas veces os ensimismáis un poco en cómo son los layouts y tal.
Pero ¿cuántas columnas ves aquí?
Una, dos, tres, cuatro, cinco, seis, siete, ocho, nueve, diez, once, doce, trece.
Ahí un montón.
Al final depende un montón.
De hecho, os voy a decir algo.
Un ejercicio muy chulo que podéis hacer con Grid.
Y si queréis aprender un poquito de JavaScript, es el hecho de hacer un spreadsheet.
Lo podéis hacer con Grid.
Esto podéis hacer que cambie.
Y fijaos, ¿qué es lo que podéis hacer aquí?
Que cuando soltéis el ratón, le cambiáis este valor, lo cambiáis manualmente aquí.
De forma que ahora el primero sea 25 y el resto debería ser repite diez veces una fracción.
Y así lo podríais tener.
Y así podéis hacerlo.
La verdad, podéis hacer un clon con Display Grid bastante fácil.
Así que para que lo sepáis.
Entonces, tema de las columnas son muchas o pocas, es que depende de la UI.
No es que sea normal o no normal.
Es que depende del diseño.
Habrá más columnas o menos columnas y ya está.
No pasa absolutamente nada.
Vamos a quitar todo esto.
Una cosa muy común que vais a ver en Grid es el hecho de que imaginad que tenemos unos resultados.
Unos resultados.
Esto está bastante chulo, ¿no?
Que tenéis unos resultados.
Tenéis unos resultados de búsqueda.
Y queréis que como mínimo, claro, normalmente decís, bueno, pues quiero que sean tres columnas.
Ya está.
Quiero que sean tres columnas.
Pero ¿qué pasa?
Que no queréis que pierda un valor mínimo.
O sea, a lo mejor queréis que la primera columna como mínimo ocupe algo.
Y claro, si así siempre lo hacéis, imagínate, tú a esto lo haces ahora más pequeño, ¿ves?
Lo haces más pequeño y siempre su ancho va a ser en concordancia a los demás.
Porque es un tanto por ciento.
Cada fracción va a cambiar.
Por lo tanto, si ahora aquí, pues imagínate, tienes 100 píxeles, cada columna será 33.3.
Pero imagínate que por lo que sea, quieres que la primera columna siempre sea de un ancho mínimo.
Pues eso lo puedes lograr.
¿Cómo lo puedes lograr?
Utilizando otro método, una función que CSS Grid tiene, que te permite definir un tamaño mínimo y máximo para las filas o las columnas.
Eso lo puedes utilizar.
Ahora lo vamos a utilizar para las columnas, pero lo puedes utilizar también para filas.
Imagínate que esta primera columna de aquí queremos que como mínimo, queremos que como mínimo sea de 100 píxeles, ¿vale?
Y que como máximo sea de un fragmento, una fracción.
¿Qué es lo que vamos a hacer aquí?
Lo que va a pasar aquí es que como mínimo siempre, siempre la primera columna va a ocupar 100 píxeles.
Nunca va a ser menos.
Y lo que va a ocurrir es que en ese supuesto se va a comportar como si fuese así.
Y por lo tanto, el resto de fracciones van a dividir el espacio disponible.
Pero cuando pueda ser de más de 100 píxeles, se va a comportar como si fuese una fracción más.
Y por lo tanto, va a conseguir el 33,3% del espacio.
Dicho de otra forma, cuando el 33,3% del espacio sea menor de 100 píxeles, se va a quedar en 100 píxeles.
¿Vale?
Eso es lo que explicaría esto.
Y este 33,3% viene porque, como hemos dicho, que como máximo es una fracción, cuando todo el espacio se divide en tres fracciones, sería 33,33%.
Vamos a verlo en funcionamiento.
Si nos vamos aquí a la preview, ¿vale?
Fíjate que ahora si lo hacemos un poquito más pequeño, si soy capaz de pillar de algún sitio, ¿vale?
Lo vamos haciendo pequeño, pequeño, pequeño.
Vale.
Y tan pequeño lo puedo hacer que no lo vemos funcionando.
A ver, lo voy a hacer aquí, pero se me va a romper otra vez esto.
Vale.
Fíjate en la primera columna, ¿vale?
Fíjate en la primera columna.
¿Ves?
La primera columna ha llegado un momento que se queda siempre, siempre en 100 píxeles, ¿vale?
Pero cuando su tamaño puede ser mayor a 100 píxeles porque la fracción ya tiene ese espacio, entonces sí que crece.
Pero su tamaño mínimo va a ser de 100 píxeles y el resto se va a tener que adecuar al espacio que tiene disponible.
Como el primero toma 100 píxeles, el resto va a tener que dividirse, ¿vale?
Y por eso estáis viendo que los otros sí que se quedan un espacio igual, pero el primero se queda fijo en 100 píxeles.
Y esto lo estamos consiguiendo gracias básicamente a este midmax.
Le estamos diciendo, oye, la primera columna como mínimo tiene que ser de 100 píxeles.
Y si no, tiene que tomar el espacio de una fracción, ¿ok?
Este método es súper importante y súper interesante y para que veáis un caso súper típico que os va a acompañar toda vuestra vida, ¿vale?
Porque esto lo vais a ver así de veces, así de veces, es el hecho de...
Mira, voy a hacer un ejemplo rápido en un momento para que os deis cuenta.
Mira, tengo por aquí un HTML que os va a sonar, que sería así, ¿no?
El tener un div y tenéis una barra lateral y un main, tenéis un main al lado.
Entonces, vamos a poner esto así y quitamos el de JavaScript y ponemos el CSS.
Imaginad, barra lateral, contenido principal.
Bueno, pues tenéis el div, le ponemos un display grid y le vamos a decir que vamos a tener dos columnas, grid template columns.
Le decimos que el primero, midmax 100 píxeles y sin una fracción y el otro, pues que sean cinco fracciones.
Entonces, ya tendríamos aquí una barra lateral, ¿no?
El aside con la barra lateral, voy a poder tener border, solo para que lo veamos un poquito, ¿vale?
Y luego podríamos poner que el main, pues tenga el borde de color azul, ¿vale? Algo así.
Pero fijaos en una cosa y esto lo podríamos hacer que sea, pues, más grande.
Vamos a poner body margin 0 y esto en un momento lo vamos a tener, ¿vale?
Vamos a decir que ocupe todo el espacio para que lo tengamos aquí.
Vale, ahí tendríamos la barra lateral, ¿vale?
Y la barra lateral lo que va a ocurrir aquí es que como mínimo va a ser de una fracción.
Lo que pasa es que, claro, ahora aquí no tengo mucho espacio, pero lo vais a ver ahora, ¿vale?
Vale, fijaos que la barra lateral tiene este espacio.
Ahora se está viendo bastante bien, entonces lo vamos a ir haciendo cada vez más pequeño.
Fijaos que cada vez se va haciendo más pequeño hasta que llega un momento que ya no se hace más pequeño.
¿Por qué?
Porque lo que estamos evitando es decir, bueno, yo la barra lateral puedo ajustarla durante un tiempo, pero no quiero romper nada.
Esto seguro que te suena, por ejemplo, Spotify.
Spotify, ay, Spotify aquí no.
Ay, sí, lo puedo mirar.
Fijaos en la barra lateral.
Spotify es un claro ejemplo que está hecho con Grid.
En la barra lateral seguramente vamos a ver que se va a ajustar un poco.
No, se ajusta.
Mira, pasa al revés.
Pasa al revés.
Se ajusta lo otro y eso tiene un tamaño fijo.
Pero es raro porque normalmente lo que se hace es que se ajuste esta parte de aquí, ¿vale?
Mientras se hace pequeño.
Pero llega un momento que no lo puedes hacer más pequeño porque no quieres que se rompa porque sabes que tienes un icono con el texto.
Entonces dices, vale, quiero que la barra lateral tenga como mínimo 100 píxeles porque sé que es lo mínimo indispensable para que se vean mis botones que tengo dentro.
Así, esta barra lateral que tenemos aquí, si tengo aquí todos mis botones, imagínate, pues, play, vamos a poner aquí buscar, lo que sea, ¿vale?
Pues sé que este espacio es el necesario para que no se me rompa.
Pero si hay más espacio, voy a darle más espacio.
Y si hay un momento en que no tengo suficiente espacio, lo que voy a hacer es que sea el contenido principal el que pierda el espacio y la barra se quede ahí.
Y fíjate que esto lo vas a lograr gracias al MinMax.
Esto es una cosa muy común, muy típica, muy, muy, muy típica que va a ocurrir en todas y cada una de las páginas web de internet a la hora de maquetar, ¿vale?
Utilizar un MinMax para que una columna tenga el ancho mínimo que nunca va a tener que bajar de los 100 píxeles.
Por lo tanto, si el espacio disponible llega a un momento que iba a ser de menos de 100 píxeles, se queda fijo ahí.
MinMax es totalmente específico de grid, ¿vale?
No lo puedes utilizar en cualquier sitio o así como cualquier cosa.
Y el ancho máximo sería en este caso una fracción.
Ahí tendrías el problema de una fracción.
O sea, el máximo sería este, una fracción.
Lo que pasa es que podrías ponerle máximo 200 píxeles, por ejemplo, y ya está.
Podrías ponerle como máximo 200 píxeles y lo podrías y ya está.
Pero claro, ¿ves? Cuando no puedes hacer más de 200, fíjate que se hace pequeño.
Pero normalmente se utiliza una fracción para que tome antes el espacio, ¿vale?
Esto os evita un montón de Media Queries también.
¿Por qué? Porque normalmente esto se hace con Media Queries.
Aquí alguien diría, no, quiero que ocupe 200 píxeles,
pero cuando el ancho que tenemos disponible sea mayor a no sé qué,
entonces lo que hacemos es, ¿sabes? Y sería mucho más complejo.
Así que esto es una forma bastante chula de evitar este tipo de cosas.
Vamos a ver otra cosa. Este sería un ejemplo para que veáis un layout.
Vamos a ver otro ejemplo bastante típico.
Mira, esto, esto por ejemplo.
Mira, esto por ejemplo.
Esto por ejemplo de la Kingsley.
La Kingsley, ¿veis que tiene aquí una cuadrícula?
Que sería con tres resultados.
Que conforme se va haciendo más pequeño, ¿veis que llega un momento que pasa a dos y luego a una?
Una, dos y tres, ¿no?
O sea, dependiendo del punto, se van haciendo más o menos.
Vale, vamos a ver, voy a ver si podemos robar este contenido un momento.
Espero que no me vuelvan a denunciar.
Mira, esto es un ejemplo buenísimo, esto es un ejemplo buenísimo de cómo no hacerlo, ¿vale?
Y os voy a enseñar cómo hacerlo.
Fijaos que aquí tiene un montón de cálculos súper chungos, ¿vale?
De width, calc, no sé qué, no sé cuánto, margin left menos 30.
Bueno, esto en realidad, a ver si ves, y tiene la primera columna.
O sea, primera columna, segunda columna, tercera columna, cuarta columna.
O sea, como que tiene aquí un sistema súper chungo, en el que tiene un montón de dips que tiene dentro el item.
Otra cosa aquí, a ver aquí, aquí sigue hostia de todos y entiendo, y está utilizando flex.
Aquí es un caso concreto, típico y seguro, justamente, de utilizar display grid, porque va a ser mucho más interesante para este caso.
Sin necesidad de utilizar media queries, ¿veis que está utilizando aquí media queries para hacer esto?
Vamos a hacer un caso similar, ¿vale?
Mira, avengers posters.
Vamos a hacer avengers posters, vamos a hacerlo en un momento.
Vamos a hacer este de aquí, no, un poster de avengers, este, este poster de avengers, ¿vale?
Vamos a copiar la dirección de la imagen, vamos a poner una imagen, source.
Imaginad que esta imagen la tenemos unas cuantas veces, ¿ok?
Porque es que si no, no terminamos ahí todo el día.
La tenemos unas cuantas veces y vamos a poner que las imágenes tengan un máximo de ancho de 300 y la altura que sea automática.
Vamos a hacerlas más pequeñas, básicamente, para que se vean, ¿vale?
Vamos a poner ahí un montón.
Imaginad que son diferentes imágenes, que si no, no me da la vida, pero imaginad que son diferentes imágenes.
Vamos a hacer que esto esté dentro de un dip, ¿ok?
Lo vamos a envolver con un dip y vamos a poner que el dip tenga un display grid.
Vamos a hacer nuestra cuadrícula, display grid, ¿ok?
Ahora, nosotros lo que queremos ahora mismo es que tenga el grid templates.
Podríamos decir, si queremos que sea similar a lo que hemos visto en la Kingsleague,
deberíamos decir que tiene que tener tres columnas, ¿no?
Tres columnas de una fracción, una fracción y una fracción.
O sea, tenemos tres fracciones, ¿vale?
Entonces, aquí tendríamos las tres fracciones, cada una...
Bueno, aquí, claro, le he puesto esto.
En lugar de hacer esto, no sé...
Así, ¿vale?
Para que ocupe todo el espacio de la cuadrícula porque si no queda...
Ahora, una cosa que tendríamos en la Kingsleague, fijaos que hay una separación en cada uno de ellos, ¿no?
Entonces, una cosa que podemos hacer para separar las columnas es indicarle que las columnas tienen que tener un gap, un hueco.
No se utiliza el margin, ni baddings, ni cosas raras, ¿vale?
Lo que se utiliza es el gap.
El gap, lo que vamos a hacer es asegurarnos que vamos a tener una separación entre las columnas.
En este caso, le podemos decir, oye, 16 píxeles.
Entre cada columna, ¿ves que habrá aparecido aquí una separación?
Entre cada columna, quiero que haya una separación de 16 píxeles.
Ojo con esto porque la última forma correcta de hacerlo, en realidad, es poniendo al principio grid-column gap.
No pasa absolutamente nada si utilizáis column gap porque, como veis, está totalmente soportado.
No hay ningún problema.
Pero, pero, esta es la forma antigua.
Yo lo hago así porque estoy acostumbrado, pero, en realidad, automáticamente va a utilizar esta, ¿vale?
O sea, que deberíais utilizar grid-column gap.
Pero, bueno, si utilizáis esta o si la veis, que sepáis que también funciona,
pero es por retrocompatibilidad con los navegadores antiguos.
No la van a quitar, ¿eh?
Tampoco os preocupéis.
Luego tendríamos esto, ¿no?
Column gap, ¿vale?
Y ahora también, fijaos que entre filas, entre la fila 1, la fila 1 y la fila 2 que tenemos aquí,
también están pegados.
Tendríamos que poner row gap y aquí también, pues, podríamos poner 32 píxeles.
Y fijaos que la separación que hay entre filas es el doble que la separación que hay entre columnas.
Porque he puesto que la fila tenga 32 píxeles, o sea, el doble de la separación de las columnas.
Esto lo podéis hacer en una sola línea también, ¿vale?
Podéis poner gap y podéis ponerle, creo que la primera, si no me equivoco,
la primera son las filas, 32 píxeles, y la segunda, las columnas.
Lo podéis hacer con una sola propiedad.
Y si vais a utilizar la misma separación entre filas y columnas, podéis simplemente poner 16.
Y ahora, fijaos que ha quedado lo mismo, tanto en columnas como en filas, ¿vale?
Así que ya sabemos separar.
Ya nos estamos ajuntando bastante a esto de aquí.
También cada imagen veo que tiene un borde radius, pero bueno, esto tampoco es tan importante,
pero lo vamos a hacer solo porque quede más o menos igual.
Vale.
Hasta aquí bien, ¿vale?
Hasta aquí, perfecto.
Tenemos tres columnas, parece que todo va bien.
Pero ¿qué pasa?
Que es verdad que tenemos tres columnas y es verdad que sí que se está ajustando a su espacio, ¿no?
O sea, no hay ningún problema, se está ajustando a su espacio.
Pero ¿qué pasa?
Que llega un momento que me gustaría, cuando llega aquí, que pasase a ser dos columnas, ¿verdad?
O sea, hay un momento que ya se ve tan pequeñito que realmente lo correcto debería ser que se viese como en dos columnas,
porque si no, no tendría mucho sentido.
¿Qué podríamos hacer?
Pues podríamos decirle, a ver, vamos a hacer una cosa.
Cuando por defecto, vamos a hacer, fíjate, vamos a hacer algo responsive, lo voy a hacer en un momento.
Por defecto quiero que sea una sola columna.
Pero si el ancho que tenemos disponible es mayor a 300 píxeles, vamos a decirle que el template sea de dos, ¿vale?
Queremos que sea de dos.
Entonces, ¿qué va a pasar?
Que cuando sea de menos de 300 va a utilizar una columna, cuando es mayor de dos, ¿vale?
Ya lo estamos haciendo responsive, ¿vale?
Vamos a ir más allá.
Cuando el width es mayor de 600 píxeles, pues vamos a hacer que tenga tres columnas, ¿vale?
Tres columnas, perfecto.
Pues una fracción, una fracción y una fracción.
Y ahora fíjate, conforme va ganando espacio, ¿vale?
Ahora son tres columnas, menos de 600, dos columnas.
Vale, lo hemos hecho responsive, pero se puede hacer mejor.
Se puede hacer mucho mejor y esto, fijaos, es bastante código, bastante difícil de entender.
Y que al final lo que está pasando es que no estamos utilizando correctamente grid, ¿vale?
No estamos utilizando correctamente.
Porque esto al final sería un rollo, tener que estar constantemente aquí pensando en cada media query cuánto tiene que utilizar.
Y aquí, amigos, es donde está la magia del midmax, ¿vale?
Voy a crear un nuevo codilink que pone exactamente lo mismo, ¿ok?
Exactamente lo mismo, pero aquí lo voy a hacer un poco diferente.
Vamos a quitar las media queries y en el grid template columns vamos a hacer una cosa.
Vamos a decirle, oye, quiero que repitas, ¿vale?
Quiero que repitas, no sé cuántas veces, todavía no sé cuántas veces tienes que repetir las columnas,
pero lo que tengo claro es que, como mínimo, cada columna, como mínimo, tiene que ocupar 200 píxeles.
Y si no, utiliza una fracción.
Pero claro, ¿cuántas veces se tiene que repetir?
¿Cuántas veces, cuántas columnas tendrías que utilizar con el midmax?
No lo sabemos, ¿verdad?
Pues por suerte tenemos dos valores de grid que nos va a ayudar justamente con esto.
Uno sería autofill, ¿vale?
Autofill o autofill, podemos autofill o autofit, que ahora os explicaré la diferencia para que la veáis claramente.
¿Qué es lo que hace autofill?
Voy a utilizar autofill primero.
¿Qué es lo que hace autofill?
Lo que hace autofill es ubicar el número de columnas que sean, que ocupan en el ancho,
mientras su ancho mínimo sea de 200 píxeles.
¿Qué quiere decir?
Que si tenemos 400 píxeles, me va a colocar dos columnas.
Pero si tenemos 500 píxeles, me va a poner dos columnas, solo que me las va a hacer un poco más grandes,
hasta que sea capaz de poner una tercera columna, que será en el punto de los 600 píxeles,
porque cabrán tres columnas de 200 píxeles.
Porque 200 píxeles es el tamaño mínimo que le hemos dicho que tiene que tener una columna, ¿vale?
Así que con esto, justamente, ahora lo que tendríamos que ver es que fíjate que automáticamente,
en cuanto tiene la posibilidad, ¿qué pasa aquí?
Aquí solo puede enseñar una columna, porque no puede poner otra columna que satisfaga el tamaño mínimo.
Y hasta que no pasemos de 400 píxeles para que puedan caber dos columnas,
aunque sean cada una de 200 píxeles, que es el tamaño mínimo que hemos puesto aquí,
no va a aparecer, ¿veis?
Ahora han aparecido. ¿Por qué?
Porque ya es de más de 400 píxeles y dice, vale, ahora soy capaz de,
con el tamaño mínimo, poner dos columnas.
¿Qué es lo que tendría que hacer para enseñar una tercera?
Tener 600 píxeles como mínimo, porque hasta que no llegue a ese punto,
no va a ser capaz de poner como mínimo una tercera columna.
Cuando llegue a 600 píxeles, pondrá la tercera.
Y así constantemente, fijaos, constantemente, ahí lo vamos a tener,
constantemente lo vamos a poner.
Así que esto sería la forma correcta.
Y fijaos, fijaos, por favor, que son literalmente cinco líneas de código.
En cinco líneas de código, sin utilizar ni una media query,
sin utilizar absolutamente nada,
lo que hemos hecho es, este sistema que veis aquí,
este sistema que veis aquí, bastante más complejo,
lo hemos hecho con simplemente cinco líneas de código.
¿Sabes? O sea, hemos hecho cinco líneas de código.
No hemos tenido que utilizar hacks raros de menos 30 píxeles.
No hemos tenido que utilizar, por ejemplo, aquí, cálculos súper extraños.
No hemos tenido que poner, ¿veis?
No hemos tenido que utilizar media queries.
No hemos tenido que utilizar absolutamente nada.
La diferencia con FlexGrab, como puede, o sea,
es que esto es muchísimo, muchísimo más potente que FlexGrab.
FlexGrab, al final, lo que va a hacer es separarlo,
tirarlo abajo y ya está.
Y esto es mucho más potente.
Y al final lo que estamos haciendo es que estamos controlando mucho mejor
cuál es el tamaño mínimo, cómo luego se tiene que expandir,
es mucho mejor, ¿no?
¿Pero qué función tiene MinMax?
Bueno, Ángel Rojo, seguramente es porque ha llegado tarde,
pero es que lo hemos explicado antes.
Hemos explicado el método de la función que tiene MinMax.
Hemos explicado que lo que estamos diciéndole es
cuál es el tamaño mínimo que tiene que tener la columna, ¿vale?
Y si ya llega al tamaño mínimo,
cómo se tiene que comportar por default, digamos, ¿no?
Así que como máximo va a tener un fragmento.
También podríamos llegar a decir, oye,
si queremos limitar el ancho máximo,
podemos decirle que como máximo sea de 400 píxeles.
Lo que pasa es que en este caso ya va a ser un poco más rollo,
porque justamente lo que queremos es que se pueda ajustar constantemente.
Y luego, si queréis limitar el número de columnas,
lo que tendríais que hacer más bien es decir,
bueno, pues lo que podemos hacer es que esto,
el contenedor, tenga un ancho máximo.
Por ejemplo, podríamos decir 500 píxeles.
Y esto lo podréis...
Lo podemos centrar, ¿vale?
Y ahora lo que va a ocurrir es que ya no va a seguir creciendo.
Podéis hacer el cálculo de cuánto sería lo que queréis.
Por ejemplo, tres columnas y ya lo tendríais ahí.
Y ya estaría. Punto pelota.
Vamos a ver otra cosa que es bastante interesante
sobre el autofill.
Vamos a hacer esto un poco más pequeño, ¿vale?
Que ahora las columnas sean de 100.
Vale, fijaos que ahora como son de 100,
pues ahora salen más, es normal,
y salen más fácilmente.
La diferencia entre autofill y autofit.
Hay una diferencia muy sutil, muy pequeña, ¿vale?
Que es un poco...
Que no es tan importante,
pero sí que es interesante que sepas.
Claro, aquí porque tenemos un montón de imágenes
y al final cabe por todos los lados.
Pero imaginad que solo tenemos cuatro imágenes, ¿vale?
Cuatro imágenes.
Esto es lo que muchas veces nosotros esperamos.
El hecho de, si tenemos una cuadrícula
y solo tenemos tres elementos,
lo que esperaríamos es que ocupe cada espacio
y aquí debería ir otra,
pero como no lo hay, pues queda así.
Esto es lo que normalmente se hace
en los resultados de búsqueda.
No tiene sentido que ocupen todo el espacio,
sino que tú lo que quieres es siempre tener el mismo ancho
para que no se rompa el layout, ¿no?
Entonces, lo que podríamos hacer aquí es decir,
bueno, no, me da igual.
Quiero que hagas un autofit.
Y lo que va a pasar con el autofit
es que va a ocupar todo el espacio.
Va a decir, bueno, aunque no haya...
Si no hay más elementos, voy a ocupar todo el espacio
y voy a hacer que sean más grandes.
Pero esto no es normalmente lo que quieres hacer
en los resultados de búsqueda porque quedaría muy raro
que de repente, ¿no?
Te diga, ah, si solo sale un elemento, sale enorme.
Si salen seis elementos, salen chiquititos, ¿no?
Entonces, diríamos que uno sería lo que está rellenando el espacio
y el otro lo está ajustando.
Fíjate la diferencia.
Autofit es que está ajustando, está estirando el contenido
y lo está ajustando hasta los límites.
Y autofit es que lo está rellenando.
Está dejando trozos de la cuadrícula vacíos
y solo está rellenando los huecos.
Eso sería la diferencia.
Pero el tema es que cuando tenéis muchos resultados,
no vais a ver la diferencia, ¿vale?
No vais a ver la diferencia,
va a ser exactamente lo mismo
y vais a pensar, pues no tiene diferencia.
Pero cuando tenéis pocos elementos,
sí que vais a notar cuál es la diferencia, ¿no?
¿Con Tailwind esto ocupa menos líneas de código o más?
Con Tailwind el problema es que hacer esto,
esto, lo tenéis que hacer manualmente.
Ocupa más o menos lo mismo.
O sea, al final va a ocupar esto.
Va a ocupar exactamente lo mismo.
O sea, tú igual lo haces en menos líneas,
pero tendrías que hacer cosas así como grid,
calls, repeat, no sé qué.
Lo tenías que hacer manualmente.
Esto es clave, amigos.
Esto es clave.
Aquí es donde se ve justamente la potencia que tiene grid.
Porque fijaos lo fácil que hemos hecho
un sistema de resultados en una cuadrícula
que vais a ver que un montón de veces
se hacen cosas muy raras,
como en este caso de la Kingsleague,
con margin left,
con un montón de media queries de decir,
bueno, cuando es uno o tres.
Incluso si utilizáis bootstrap,
seguro que os ha pasado
que tenéis que hacer un montón de cosas raras
para tener que hacer justamente que sean responsive
a la hora en diferentes tamaños.
Y aquí es súper fácil el hecho
de que se ajuste a la cuadrícula
y automáticamente en cinco líneas de código
haces unos resultados de búsqueda buenísimos, ¿vale?
Buenísimos, sin ningún tipo de problema.
Entonces, ya hemos visto la separación, los gaps.
Vamos a ver el tema de las líneas de la cuadrícula.
Que esto está bastante interesante también
y que muy pocas veces la gente se para a ver esto, ¿vale?
Mirad, cuando nosotros...
Voy a hacer que sean más grandes las...
Vamos a hacer auto rows.
Vamos a poner que cada fila sea de 50 píxeles, ¿vale?
Vamos a ponerle un gap de 16 píxeles para que veáis.
Antes me preguntaba a alguien,
¿por qué utilizas gap y no utilizas margin?
A ver, si utilizas margin,
aparte que el margen no lo puedes poner aquí.
El margen lo tienes que aplicar dentro de los elementos.
Pero claro, el margen es bastante complicado de aplicar
porque tú no puedes aplicar...
No se aplica exactamente igual la separación del margen
a cada uno de los elementos.
O sea, si tú dices que quieres que sea 4 píxeles,
fíjate que el margen se está aplicando también aquí fuera.
Que a veces a lo mejor es lo que quieres, ¿eh?
No pasaría nada.
Si es justamente lo que quieres, no pasa nada, ¿eh?
Pero muchas veces lo que quieres no es que haya una separación aquí.
Y por lo tanto ya, imagínate que te decir,
no, pero entonces...
Y esto de hecho es lo que hace...
Es lo que hemos visto aquí, que es un hack, ¿vale?
Lo que pasa justamente aquí, fíjate,
en equipos, aquí, ¿qué es lo que pasa?
Que hace la separación con margin.
Como hace la separación con margin, fíjate lo que hace.
¿Ves? Que hace marginLeft menos 30 píxeles.
¿Por qué?
Porque lo que quiere es que este margen de la izquierda no esté.
Y lo que dice es, bueno, pues lo que voy a hacer es marginLeft menos...
Le quito el margen que estoy aplicando
y así va a quedar alineado como espero.
Pero eso no es la forma correcta
cuando lo que quieres tener es la separación entre elementos.
Lo correcto en todo caso, además, es decirle, bueno,
quiero hacer el gap de 4 píxeles
y en todo caso, dentro, si lo que quieres es empujar el contenido,
lo que puedes hacer es el padding.
Y entonces es mucho más fácil, además, de pensar
si lo estás aplicando directamente desde el contenedor
en lugar de tener que aplicarlo en los elementos.
Porque muchas veces, además, en los elementos
tienes el problema este,
de que si no quieres que haya ningún tipo de separación,
no lo vas a poder lograr a no ser que utilices algún hack.
No es imposible utilizar margin,
no es algo siempre negativo ni está mal.
O sea, a veces puedes utilizar margin y puede tener sentido.
Pero normalmente, si hablamos de separación entre elementos,
lo mejor es que lo hagas directamente en el contenedor.
O sea, sería un poco lo que es mucho más sencillo
y te va a simplificar a la hora de pensar
cómo los quieres separar.
Dicho esto, fijaos que habíamos dicho por aquí
que teníamos el grid, ¿no?
Y que al darle aquí a grid, ¿vale?
Hay un botoncito aquí.
Fijaos que aquí aparecen unos botones.
Uno, uno, ¿veis? Uno.
Ahí sale un dos.
A ver, aquí dos.
Aquí un tres.
Aquí un cuatro, ¿vale?
Y aquí también hay uno, dos, tres, cuatro.
Y luego menos cuatro, menos tres, menos dos, menos uno.
Vale.
Esto es una de las cosas más divertidas
y con la que vas a hacer esto de los bento grids, ¿vale?
Esto de los bento grids se hace con lo que te voy a explicar ahora.
Este tipo de evento se hace con lo que te voy a explicar ahora.
Fíjate.
Tenemos estas líneas, ¿no?
Estos números aquí.
¿Qué es lo que hace esto?
Esto lo que está haciendo es las líneas de la cuadrícula.
Es como que está definiéndonos
cómo nos da estas líneas numeradas
para posicionar elementos.
Por ejemplo, el elemento este de arriba a la izquierda
está posicionado entre la columna 1
y la columna 2, ¿no?
Está ahí posicionado.
Así que tenemos aquí uno, dos, tres, cuatro, ¿no?
Ahí lo que podríamos decir es que el primer elemento,
mira, lo voy a poner de otro color
para que lo veas más bien, ¿vale?
Voy a ponerle background green
y así lo vamos a ver mientras hablo...
Vale, ahí lo tenemos.
Vale, vamos a ponerle un light green
y borde un píxel.
Vamos a ponerlo, bueno, no sé, de dos píxeles.
Dos píxeles y ponemos que este sea green, ¿vale?
Vale, fijaos en este elemento.
Este elemento, si lo veis aquí,
si le damos a los numeritos,
está posicionado entre esta esquinita,
entre este 1 y este 2.
Entonces, lo que podríamos decir es que
este elemento first child
lo podríamos mover y decirle
dónde está ahora mismo posicionado.
Vale, pues está el grid column start.
¿Dónde está empezando?
Pues está empezando desde el 1
y ¿dónde está terminando?
Pues está terminando en el 2, ¿no?
Fíjate que no ha cambiado nada visualmente.
Está terminando en el numerito 1
del 1 al 2.
No ha cambiado absolutamente nada.
Pero lo bueno es que
una vez que tenemos estas propiedades,
nosotros le podemos indicar
dónde tiene que terminar
y dónde tiene que empezar.
Imagínate que este primer elemento
quieres que vaya del 1
hasta el 3.
Pues le diríamos,
oye, quiero que la columna
empiece del 1
pero que termine en el 3.
Y fíjate lo que pasa.
Lo que pasa es que de repente
ese elemento dice, vale,
empiezo desde la línea vertical 1
hasta la línea 3.
O sea, estoy empezando
desde aquí hasta aquí.
Y ojo, lo más interesante
es que le puedes decir
que empiece donde te dé la gana.
Por ejemplo,
imagínate que quieres
que el primer espacio quede vacío.
Pues le vamos a decir
que empiece desde la línea vertical 2,
¿vale?
Fíjate lo tenemos aquí.
Desde el 2 al 3.
Pues le decimos esto
del 2 al 3
y fíjate dónde se coloca.
Y lo mismo podríamos decirlo otra vez
que vaya hasta el 4.
Y entonces empuja el resto.
Con esto justamente
es que vamos a poder construir
los vento.
Porque los vento,
lo mismo que le decimos
de las columnas,
también se lo vamos a decir
de los rows.
Mira,
¿cuántos elementos hay aquí?
1, 2, 3, 4, 5, 6, 7, 8.
Hay 8 elementos, ¿no?
Vamos a hacer una cosa.
Lo he contado bien, ¿no?
4, 5, 6, 7, 7, 8.
Vale,
vamos a hacer una cosa.
Fijaos lo fácil,
lo fácil que es aplicar esto.
Lo fácil que es aplicar esto.
Imaginad, ¿vale?
Que tenemos esto
y os digo,
venga,
hay que hacer este evento.
Este evento de aquí.
Pues lo único que tenemos que hacer
es fijarnos en las líneas.
Aquí podemos ver que es,
si nos fijamos,
aquí sería la 1,
el 1, 2, 3, 4, ¿no?
Lo tenemos aquí.
1, 2,
bueno,
tenemos aquí los dibujos.
1, 2, 3, 4, ¿vale?
Entonces,
tendría que ir del 1 al 2,
¿vale?
Solo de un 1,
pero tendría que hacer
grid row start,
del 1,
grid row start,
y tendría que llegar hasta el 3.
Ahí está,
al end, perdón.
End hasta el 3.
Y ya está.
O sea,
con esto ya tendríamos
esto de aquí.
Obviamente me faltaría
todo el diseño y tal,
pero fíjate que lo que está pasando aquí
es que está ocupando
dos filas.
Así que aquí lo que podemos decir
es que vaya del 1 al 3
y así ocuparía dos filas.
Esto,
muchas veces,
es un poco raro.
¿Por qué?
Porque tienes que estar pensando
constantemente
dónde empieza,
dónde termina,
dónde tenemos que estar
diciéndole...
Pero al final,
aquí queda muy claro
que si lo ves,
dices,
bueno,
pero si me estás diciendo
que ocupa dos filas,
¿por qué no puedes directamente
decirle que ocupe dos filas
y te olvidas
y te olvidas
de tener que hacer
que vaya de la línea
de la 1 a la 3?
Que es un poco rollo, ¿no?
De la línea 1 a la 3.
Es un poco rollo.
Bueno,
pues se puede hacer también.
Le puedes decir,
oye,
quiero que empieces
y que ocupes dos filas.
Fíjate que ahora ocupa dos filas.
Y lo mismo le podríamos decir
con las columnas.
Quiero que ocupes dos columnas.
Y entonces,
fíjate lo que hacemos ahora.
Aquí lo que tenemos ahora
es que ocupa dos filas
y dos columnas
y lo tenemos ahí.
Así que lo que estamos haciendo ahora
es decirle lo que ocupa directamente.
No le estamos diciendo
de dónde empieza
a dónde termina.
Le hicimos lo que ocupa.
Y podríamos hacer esto
exactamente con otros.
O sea,
podríamos ir al
deep
nf child
2.
Creo que...
No sé si esto...
Sí,
creo que esto lo hará bien.
Vamos a poner aquí
light blue
borde
2 pixels
solid blue
y
grow column
start
span
3.
¿Vale?
Fíjate que aquí...
Bueno,
claro,
light red
¿Light red no existe?
Light,
coral,
ahora.
Es que el coral
es muy parecido al salmón.
Cyan,
pink,
sea green.
Vale.
Y aquí le vamos a poner esto
y lo mismo
podríamos decirle
con el row.
Y le podríamos decir
row start
y span 2.
¿Vale?
Y aquí le podríamos decir
a cada elemento
cuánto es lo que tiene que ocupar.
¿Vale?
Fijaos lo fácil que es.
Esto también se puede hacer
de otras formas
mucho más sencillas.
¿Vale?
Porque tienes que poner
grid column start
no sé qué,
no sé cuánto
y puede ser un poco rollo.
Pero también puedes utilizar
la forma más corta
por ejemplo
grid column
y le puedes decir aquí
que vaya del 2
al 4.
¿Vale?
Y fíjate
aquí va desde la línea 2
a la 4.
Y lo mismo con el grid row.
Le puedes decir
que vaya de la 2
a la 3.
¿Vale?
Y entonces ya lo estamos moviendo.
Y una cosa que es muy interesante
con esto
es que también
puedes moverlos
donde te dé la gana.
Por ejemplo,
aquí puedes poner
que este vaya del 1
al 3.
Y fíjate que aquí
lo que vamos a hacer
es independientemente
de su posición
en el HTML
¿no?
Que era 1, 2, 3, 4, 5, 6, 7, 8, 9.
Lo que estamos haciendo es
bueno,
como este de aquí
lo he puesto aquí
lo que voy a hacer con este
es ponerlo aquí.
Y esto
muchas veces
es interesante
con temas de responsive
porque a lo mejor
en una media query
vas a querer
que un elemento
que a lo mejor
lo quieres centrado
en algún sitio
por lo que sea
cuando cambia
lo que es poner arriba
a la izquierda
pues esto lo puedes hacer
cambiando esto.
Y el tema de los números
por eso es importante
que lo tengas aquí
en visibilidad.
Que tienes los números
de las líneas
tanto verticales
que sería la de las columnas
que sería la columna
o sea la línea
1, 2, 3 y 4
y la de las filas
1, 2, 3 y 4 y 5
porque tenemos al final
4 filas
5 líneas verticales
horizontales
y ojo también
una cosa
que es bastante interesante
que también podéis utilizar
números negativos.
¿Qué quiere decir esto?
Que podéis contar
desde el final.
Por ejemplo
si queréis
que la columna
o sea este 2
vaya desde
bueno el 2
será este ¿no?
Queréis que vaya
desde la primera
hasta la penúltima
¿no?
Pues podéis hacer esto
no el menos 1
vale
ah claro
es que he hecho columna
vale he hecho columna
vale pues sería así
menos 2
y entonces sería la penúltima
la última sería esta
y esta sería la penúltima
pues entonces lo estaríamos
haciendo así
lo estaríamos lagrando
de una forma diferente
pero lo podríais hacer
o si queréis que ocupen
todas las filas
pues podéis decirle
bueno quiero que vaya
de la 1
a la menos 1
y con grid row
ay
¿por qué no me ha hecho esto?
espérate
¿por qué no me ha hecho esto?
pues pensaba que este me iba
¿por qué no me ha hecho
de la menos 1 a la 1?
¿a la 1?
no
¿de la 1 a la menos 1?
pensaba que me iba a hacer
a ver si ponemos aquí 1
aquí sí que la pilla
pues pensaba que este me iba a pillar
me iba a bajar de todos
pues me ha dejado fatal
¿por qué puede ser que esto no...?
porque está esta
¿sabes?
porque está esta
y al final no puede
¿sabes?
porque lo empujaría
claro
podría tener sentido
a ver
no
podría tener sentido
pensaba que lo iba a pillar
con las columnas
si que lo está haciendo
ves que va desde la 1
a la menos 1
que será el final
pero con la grid row
no lo ha hecho
pensaba que a lo mejor
pillaría todo el espacio
pero entiendo
que no podrá
a lo mejor
por esta del first child
pero bueno
que podéis referir
desde adelante hacia atrás
lo tenéis aquí
veis que pone aquí
menos 3
menos 2
menos 1
pues ahí lo tenéis
a ver
menos 4
es que es menos 4
es que lo he pensado mal
claro
menos 1 es abajo a la derecha
ha sido error mío
porque veis
el menos 1
está aquí
claro
es el menos 4
debería ser este
y así es como
ocuparía todo el espacio
vale vale
pues ya está
ahí es que tendría
todas las filas
que serían
las 4 filas disponibles
las tendríais aquí
tendría 1, 2, 3
o sea
llegaría hasta el final
vale
en este caso
bueno
menos 4
sí
estaría haciendo eso
correctamente
vale
pues así es como
lo podríais hacer
lo podríais hacer
también con números negativos
pero a ver
no es obligatorio
solo
o sea
os lo explico
solo para que os sepáis
porque claro
salen aquí los números
y a lo mejor
os volvéis locos
pero lo único que tenéis que entender
es que
la línea horizontal 4
se refiere también a la menos 4
vale
o sea que podéis contar al revés
que la menos 3
claro
sería como la anterior
pero tened en cuenta
que lo podéis utilizar
pero tampoco lo hagáis así
de esa forma
lo importante
la más importante
es cuando queréis ir de punta a punta
y no queréis saber
cuántos tenéis
pues así lo que podéis hacer
es decir
del 1 al menos 1
y esto lo que vais a conseguir
es utilizar todo el ancho
porque vais
del punto 1 vertical
¿no?
de este punto
que tenemos aquí
arriba a la izquierda
hasta este punto
que tenemos arriba a la derecha
y así pues sería mucho más fácil
que lo podáis hacer
pero bueno
las formas abreviadas
yo
esta forma abreviada
no está mal
si la entendéis
pero tampoco
os diría
que os volváis locos
un tema importante
sobre esto
imaginad
vamos a poner
que esto vaya
del 1 a la 3
y de la 1 a la 3
¿vale?
aquí ponemos al primer elemento
que vaya de la línea 1 a la 3
verticalmente y horizontalmente
pues este mismo
lo podéis poner en el mismo lugar
y veis que se sobreponen
esto es una cosa
que no se puede lograr
en CSS de cualquier manera
y muchas veces
se puede utilizar
Position Absolute
para ponerse justo por encima
pero hay pocas formas
de forma nativa
y controlada
que lo podéis lograr
sin utilizar el Left
Top
Right
Cambiando márgenes raros
y hacks
aquí sí que podéis
sobreponer
dos elementos
de forma totalmente controlada
sin tener que mover nada
porque le estáis diciendo
que los dos
tienen que ponerse
en el mismo lugar
y lo podéis ver claramente
que uno está
debajo del otro
¿veis?
porque si le pongo opacidad
¿veis que están los dos ahí?
esto es muy interesante
porque a veces en CSS
la gente se cree
que para sobreponer dos elementos
hay que hacer cosas muy raras
y no tiene por qué ser así siempre
aquí lo estamos haciendo
y lo estamos haciendo
totalmente controlado
lo interesante además
es que dependiendo
del z-index
que le pongáis
obviamente
se verá
uno u otro
delante o detrás
¿vale?
si le ponemos
por defecto
debería ser el segundo elemento
que es el que tiene más
como más potencia
para que se quede encima
por eso es este
el que se está viendo encima
pero le podríais cambiar
el z-index
y entonces
la pregunta del millón
¿pero por qué querríais
hacer esto?
¿para qué serviría
una cosa de esta?
¿esto sirve para algo?
la verdad que sí
por ejemplo
imaginad que al hacer hover
pues queráis poner
que al hacer hover
a vuestras columnas
pues aparezca algo
que se quede ahí detrás
por ejemplo
en los ventos
lo podéis hacer fácilmente
imaginad
que estáis aquí
y dices
bueno
cada vez que
haga hover
en uno de los elementos
lo que voy a querer
es que aparezca
el otro elemento
que había detrás
y que haga una animación
y que no sé qué
y pues eso lo podríais hacer
por ejemplo
con esto que estamos viendo
así que todo
tiene su utilidad
¿cómo se comporta
ese diseño en responsive?
perfecto
porque al final
si es que lo podéis cambiar
todo lo que queráis
o sea
vosotros podéis poner aquí
una media query
o sea
todos estos diseños
no se comportan
de forma muy complicada
porque lo bueno
que tenéis con esto
es decir
mira
imaginad que es responsive
pues lo que podéis hacer
es decir
bueno
cuando se haga más pequeño
lo que vas a hacer
es que esto se quede arriba
esto pasa a estar abajo
y esto pasa a estar abajo
y esto lo podéis conseguir
justamente
con los grid template columns
o sea
cuando justamente
podéis ir cambiando
con la media
decís
oye
cuando el width
sea mayor
a 500 píxeles
¿vale?
pues vamos a decirle
primero son dos fracciones
porque es muy sencillo
pero cuando
es más grande
pues voy a hacer
que tenga un min max
de 200 píxeles
una fracción
una fracción
y una fracción
¿no?
y así lo que podéis hacer
ay
no he hecho bien
la media query
porque
ay
porque he hecho mal
el CSS
pero fijaos
que con esto
lo que podéis lograr
es básicamente
oh que rabia
este back
hay un back ahí
¿vale?
pero veis
que podéis cambiar
totalmente la plantilla
aquí tendríais
imaginad
en un vento
pues algo que sea
muy espectacular
pero cuando es móvil
hacéis solo dos calumnas
y hacéis que esto
se quede arriba
y ya está
entonces no es
excesivamente complicado
lograrlo
y de hecho he visto
muchos ventos
que se ajustan
perfectamente
y que no hay ningún
tipo de problema
y que quedan
súper bien
eres un gran profe
gracias hombre
una calculadora
por ejemplo
también
así sí que es necesaria
una media query
claro en este caso
sí puedes
a ver
es que las media queries
no están prohibidas
ni mucho menos
¿no?
el tema es
que si las podemos evitar
mejor
pero claro
si tienes un diseño
así tan especial
obviamente esto
vas a querer controlar
cuando se ve
qué espacio ocupa
cada cosa
y es normal
que quieras hacer
una media query
para controlar
correctamente
cómo se ve
esto automáticamente
no te lo va a hacer
¿sabes?
no te lo va a hacer
grid
no vas a ver
cuál es lo más especial
imagínate
es lo que os decía
en este caso
cuando es muy grande
lo especial
lo tiene aquí
y esto seguro
que con todo
lo que estáis viendo
estáis viendo
ostras
aquí tiene un call span
donde este span
pues ocupa dos
y claro
cuando lo haces
media query
pues a lo mejor
este elemento
lo quiere
esta parte del reloj
que es justamente
esta parte de aquí arriba
cuando lo tenemos así
más pequeño
más grande
pues lo podemos poner
ahí arriba
o lo podemos poner
en el centro
y cuando hacemos más pequeño
lo movemos arriba
o donde queramos
o sea que lo importante
es que el diseño
no se nos rompa
directamente
¿por qué mejor evitarlas?
porque añade complejidad
las media queries
al final
no dejan de ser
como condicionales
los condicionales
en el mundo
de la programación
en general
se tienen que evitar
lo más
al máximo posible
no significa
que no utilices
condicionales
significa que
una bifurcación
de tu código
al final
añade complejidad
cuantas más
media queries
tienes
más problemas
vas a encontrarte
entonces
¿son malas
las media queries?
no son malas
pero
si puedes evitarte
una media query
evítatela
siempre es bienvenido
evitarte una media query
¿vale?
o sea que
no habría ningún tipo
de problema
bueno
os voy a enseñar
vamos con otra cosa
que está muy muy muy chula
que es increíble
y que os va a cambiar
la vida
para cuando hagamos
layouts
¿vale?
y es que esto
para hacer layouts
es la clave
y vamos a eliminar
todo esto
vamos a poner aquí
tres
y ponemos esto
por aquí
vale
mirad
vamos a hacer un layout
que además
es un layout
muy típico
mirad
este es el html
section
class
container
tenemos un header
el aside
el main
y el footer
¿ok?
vamos a estilar
primero el container
y obviamente
con un display grid
y vamos a estilar
container
el header
le voy a poner un colorcillo
background09f
básicamente para que veáis
los colores
vamos a quitarle
el margen por defecto
que tiene el body
para que quede todo ajustado
vamos a poner
que el container
el aside
yo que sé
vamos a ponerlo de color
amarillo
¿vale?
solo para que cada uno
tenga un color
el main
vamos a ponerle
un color
no sé
a ver que color
le podemos poner
rojo
que es lo más importante
y el footer
le vamos a poner
un color menos importante
light
gray
cia
¿vale?
que no se vea tanto
bueno
vamos a ponerle gray
que así se verá bien
¿vale?
o sea
tenemos cuatro secciones
totalmente diferentes
y tal
bueno
imagina que queremos hacer
el layout
típico
típico
de toda la vida
¿no?
grid template columns
voy a hacer esto
lo voy a quitar así
y así puedo
con el bug este
que me está atormentando
pero
a ver si lo puedo ajustar
vale
grid template columns
vamos a hacer
tres columnas
tres columnas
uno fr
uno fr
¿vale?
fíjate que me ha hecho
tres columnas
y me está dejando esto mal
porque no es exactamente
lo que queremos
por ahora lo vamos a dejar
más o menos así
solo para que lo tengamos
más o menos claro
¿no?
vamos a poner
rows
y template
rows
y vamos a utilizar
cosas que hemos ido aprendiendo
que se repita esto
min max
50 píxeles
una fracción
¿vale?
entonces ya va pillando
un poco de forma
pero ¿qué pasa?
que el header
yo lo que quiero del header
normalmente es que ocupe
todo el espacio
pues grid column
del uno
al menos uno
esto lo hemos visto
¿no?
que si queremos que vaya algo
en la línea de las columnas
de punta a punta
le digo
me tienes que
desde la fila uno
mira lo voy a ver aquí
lo vamos a poner aquí
para que lo veáis claramente
en elementos
activamos el grid
desde la línea uno
hasta la
bueno no se ve
pero está ahí
la menos uno
que no
ah
ahí
¿vale?
hasta la menos uno
¿ves ahí que se ve la menos uno?
pues ahí la tienes
hasta la menos uno
de punta a punta
para que vaya de punta a punta
porque si no
tendríamos que saber
cuántas son las que queremos que tenga
¿no?
pues tenemos que poner
hasta la línea cuatro
si lo queréis hacer así
así
pero lo mejor que hagáis así
que vaya de punta a punta
porque así no tenéis que saber
cuántas columnas son
y eso puede cambiar
en cualquier momento
ahora
vamos a hacer el aside
el aside
pues bueno
esto se puede quedar exactamente igual
porque queremos que se quede justo
debajo del header
el footer
mira voy a hacer el footer
el footer quiero que le pase un poco
lo mismo ¿no?
que vaya de punta a punta
y entonces aquí
fíjate
el footer como tiene que ir de punta a punta
pues va a ocupar el 100%
y ahora
aquí tenemos
el lateral
la barra lateral
y el contenido
solo está ocupando este espacio
pero yo quiero que ocupe
todo lo demás
por lo tanto le digo
que el grid column
vamos a decirle que
span 2
para que rellene
dos columnas
así el aside
solo se queda con una
y el contenido con otra
vamos a hacer que esto tenga más
más
más espacio
así
con 100
esto
no está mal
o sea quiero decir
es algo parecido
a lo que normalmente
podríamos hacer
obviamente
esto soy yo
que he puesto aquí
min max y tal
lo ideal es que cada cosa
tuviese
su contenido diferente
o sea por ejemplo
a lo mejor el header
quieres que sea 50 píxeles
o menos
35 píxeles
la parte del contenido
pues a lo mejor
quieres que sea una fracción
y luego el footer
quieres que sean 100 píxeles
y ahora
el tema es que
para que ocupe todo el espacio
obviamente
tenemos que asegurarnos
que como mínimo
esto sea
todo el tamaño
que tenemos aquí
disponible
¿no?
porque si no
no funcionaría
entonces esto sería
más o menos un layout
que podríamos hacer
y que incluso en móvil
lo podríamos cambiar
pero esto es un poco rollo
y os voy a explicar
por qué
este tipo de
de templates
no se suelen hacer así
¿por qué?
porque
esto es muy típico
y esto al final
lo vais a ver repetido
una y otra vez
una y otra vez
pero el tema es que
va a ser muy complicado
que vayáis al CSS
y entendáis
lo que está ocurriendo aquí
porque tenéis que ir
a cada uno
de los elementos
para ver
cómo está funcionando esto
qué es lo que está haciendo
y todo esto
pues vamos a quitar
todo esto
el grid column
grid column
grid column
vamos a quitar todo eso
y vamos a hacerlo de otra forma
¿vale?
lo vamos a hacer de otra forma
vamos a ponerle un nombre
a cada uno
de los elementos
vamos a decir
mira
el área de este grid
esto va a ser el header
el grid área este
vamos a darle el nombre
que esto va a ser el sidebar
¿vale?
a este
en el área de la cuadrícula
le vamos a decir
que es el content
y el footer
vamos a ponerle un grid área
y le vamos a decir
que es el footer
¿vale?
ya hemos nombrado
cada uno de los elementos
ahora
lo que tendríamos que hacer
es decir
bueno
ahora que sabemos
cada uno de los elementos
a que se refiere
tenemos
que definir la plantilla
de nuestra cuadrícula
con estos nombres
y así
en lugar de utilizar
el template columns
y todo esto
que también lo podemos utilizar
lo que podemos decir
es que quiero utilizar
template áreas
y vamos a definir las áreas
y le vamos a decir
mira
arriba
quiero el header
tres veces
¿vale?
luego abajo
quiero el sidebar
el contenido
y el contenido
¿vale?
y abajo
quiero el footer
el footer
y el footer
y fíjate
que hemos logrado lo mismo
pero hemos hecho algo
visual
imagínate que por lo que sea
dices
no, no
el sidebar
ya no lo quiero aquí
este sidebar
que lo tengo aquí
ahora quiero que aquí
esté el contenido
y el sidebar
lo quiero poner aquí arriba
pues ya está
el header sigue así
el side lo tengo ahí
y el contenido
lo tengo allá
ya hemos ajustado rápidamente
donde tiene que ir cada cosa
¿vale?
vamos a dejar otra vez el side
pues no
voy a probar a ver
qué pasa
si el sidebar
lo pongo aquí a la derecha
pues ya está
ya lo hemos hecho
fijaos
que de esta forma
lo que estamos haciendo
es dibujando
con CSS
básicamente
cómo es el área
y no nos tenemos que preocupar
de si tiene que ir
desde una línea
desde una columna
y no sé qué
sino lo que estamos haciendo
es visualmente decir
cómo tiene que quedar
aquí tenemos tres columnas
estamos definiendo
que tiene tres columnas
y que en esta posición
de la columna
va el header
aquí va el header
aquí va el header
aquí va el contenido
contenido
el sidebar
aquí va el footer
y estas serían las filas
o sea cada línea
serían las filas
y si lo miras verticalmente
sería una de las columnas
imagínate que quieres quitar el header
pues lo quitas el header
ya no aparece
imagínate que además
en las media queries
y esto es muy interesante
¿no?
que puedas tener una media query
que digas
vale
cuando el width
sea mayor
a 400 píxeles
¿vale?
vamos a hacer una cosa
vamos a hacer que tenga
este
vamos a hacer esto
y esto es una de las cosas
que están muy muy muy chulas
porque al final
le podéis cambiar el área
dependiendo de cómo quede
entonces
vamos a hacer que
en el móvil
esto
el sidebar se vea arriba
¿vale?
vamos a hacer que en el móvil
el sidebar se vea arriba
¿vale?
vamos a poner el contenido aquí
y aquí vamos a poner sidebar
vale
vamos a hacer que
en desktop
se vea el sidebar al lado
pero cuando lo hagamos pequeño
lo que hacemos es que el sidebar
vaya arriba a la derecha
por ejemplo
y así lo tendríamos
mucho más fácil
o sea
ahora lo que estamos haciendo
es de forma declarativa
estamos indicando
qué diseño es el que tiene que utilizar
en cada media query
súper fácil ¿no?
aquí decimos
oye en móvil
el aside
lo tienes que poner arriba a la derecha
y luego
si tienes espacio
lo pones aquí a la izquierda
y ya está
o sea
fijaos que esto es súper potente
porque no necesitáis ahora
ni siquiera pensar en líneas
ni nada
simplemente
le estáis describiendo
como dibujando
cómo queréis que estén las áreas
y ahora
lo mejor de esto
lo que podéis hacer
es decir
oye
imagínate que
en este
sería este ¿no?
porque ahora estamos en modo de escritorio
si no lo hubiera visto
no lo hubiera creído
totalmente
no lo hubiera creído totalmente
eh
imaginad
que por lo que sea decís
mira
en desktop
no quiero
que aquí aparezca nada
no quiero que aquí aparezca nada
¿vale?
o sea no quiero que
en este trozo de la columna
haya nada
quiero que haya un hueco
pues tenéis que poner un punto
y ya está
así
este header
ocupará
dos columnas
y en esta tercera columna
en esa fila
como hemos puesto un punto
habrá un hueco
esto lo podéis utilizar
tantas veces como queráis
¿veis?
ahí ya estamos dejando un hueco
podemos poner un hueco aquí también
no habría ningún problema
o lo podemos poner aquí
podéis poner el hueco
donde queráis
y esto lo que hace también
es que podáis hacer
una composición
de una cuadrícula
mucho más fácil
¿vale?
así que tenéis la posibilidad
de decir
pues aquí quiero un hueco
y aquí quiero que sí
que se vea esto
y tal
y así es como se hacen
los layouts
cuando muchas veces decís
que cuesta maquetar
que no sé qué
que no sé cuánto
pues lo que tenemos aquí
es una forma muy fácil
de hacer layouts
¿es necesario poner el min height
de 100 viewport
para que ocupe total la vista?
sí
¿por qué?
porque si yo quito esto
¿cuál es el problema?
el problema
el problema
es que el contenido
es el que están empujando
normalmente en una página
en una página normal
esto estaría lleno de contenido
tendría texto
imágenes
y no necesitaríamos seguramente esto
¿no?
pero el tema
el tema
es que a ver
si aquí en este content
empiezas a empujar contenido
y tal
claro
pues ya la altura
sería ajustando
pero para que lo veáis
lo que he hecho
es que el container
como mínimo
tome la altura
del viewport
y así es que va a ajustar
el contenido perfectamente
¿vale?
si no
no lo va a hacer correctamente
porque no va a saber
cuál es la altura
porque se basa en el contenido
y ya está
¿qué le vamos a hacer?
¿existe algún convenio
en las medidas de los media queries
para mobile tabletas?
no hay convenio
y por eso también es un tema
que es normalmente mejor
evitar
siempre que podáis
una media query
o sea
las media queries
las necesitáis
y hay que utilizarla muchas veces
pero el problema
es que a día de hoy
no hay un convenio
de media queries
hay recomendaciones
por internet
pero ¿sabes qué pasa?
que la recomendación
es cada padre
y cada madre
de su recomendación
las media queries
la única recomendación
son los datos
los datos que tenga
tu página web
hay páginas web
que el 60%
de los usuarios
son móviles
y son móviles muy antiguos
si estás en Japón
pues verás que se utiliza
una resolución más que otra
y a lo mejor
no tienes que tener
tantas media queries
si estás en Estados Unidos
pues a lo mejor
el dispositivo móvil
más usado
es el iPhone
y es el que tienes
que enfocar
depende mucho
de tus usuarios
y tus datos
no tiene sentido
ir a internet
y buscar una lista
recomendada
y más hoy en día
que además hay tantos
y tantos dispositivos
extraños
como pueden ser
los plegables
como pueden ser tablets
y tal
es imposible
manejar
todos los tamaños
que uno pueda pensar
y lo mejor
es mirar los datos
de cuáles son tus usuarios
qué resoluciones
utilizan
y basarte en eso
basarse en datos
eso es lo mejor del mundo
basarse en datos
porque si no al final
lo que te está pasando
es los datos de otra persona
y no tiene sentido
ya habéis visto así
con el tema este
de alinear
que para hacer layout
es brutal
otro tema muy importante
la alineación en línea
de los elementos
esto lo hemos visto
en flex
que además me dio por culo
pero bueno
os explico esto
a ver
ya tenemos aquí
voy a cambiar un poco
cómo está funcionando esto
voy a poner que aquí
tenga auto rows
vamos a poner auto rows
y que sea 100 píxeles
para que todas queden más
un poquito menos
50 píxeles
para que queden todas igual
y vamos a hacer
template rows
3
vamos a hacer 3
de un fragmento
vamos a quitar aquí
esto lo vamos a quitar
que tampoco lo vamos a utilizar
y vamos a quitar
todo esto
porque ahora
lo que os quiero enseñar
es más bien
cómo se alinean
oye que he hecho aquí
ah es que he puesto esto
y quería poner esto
quería poner columnas
grid template columns
queremos tener 3 columnas
que se repita
hemos utilizado el repeat
solo para que lo veáis
os quiero enseñar
cómo se alinean
los elementos
en grid
porque también
igual que en flex
se puede hacer
también se puede hacer
en grid
y de hecho
vas a ver
cómo se puede centrar
un div
vas a ver
cómo se puede centrar
un div
que es bastante interesante
también
entonces
pues con grid
se puede hacer
igual que se puede hacer
con flex
igual que se puede hacer
de muchas formas
bueno ya tenemos
el contenedor
vamos a hacer una cosa
vamos a darle
al contenedor
un ancho fijo
vale
para que lo veamos
un poquito diferente
vale
y así nos funcionen
vamos a ponerlo así
tenemos un alto
de 300 píxeles
y aquí tenemos
los elementos
vale
muy bien
lo primero que vamos
a querer hacer
es alinear
en línea
nuestros items
los items
sería el 1
el 2
el 3
el 4
5
6
7
y tal
o sea
lo que queremos
es alinear
nuestros elementos
en línea
por defecto
que es lo que está pasando
que si miramos
el justify items
tenemos aquí
diferentes valores
el valor que está
no es exactamente así
el valor por defecto
sería el normal
que funciona
de una forma
muy parecida
al stretch
que significa
estirar
que por eso
estamos viendo
que ocupa
cada columna
dentro del elemento
está ocupando
todo el
todo el espacio
entonces
el justify items
lo que vamos a hacer
es alinear
en línea
vale
en línea
como lo vamos a ver
aquí ahora
si que noten la diferencia
si hacemos el center
que está pasando
que está centrando
dentro de esa columna
en línea
está centrando el elemento
le podríamos decir
que lo deje
al principio
y dentro
de esta cuadrícula
que sería
esta parte de aquí
lo está dejando
al principio
luego si le ponemos
el en
lo estaría poniendo
al final
y si no
el center
lo dejaría
en el centro
y podemos poner
el stretch
para que se estire
ahora bien
el justify items
lo que hace
es cambiar
el valor
de cómo se tiene
que alinear
ese elemento
en línea
dentro de la cuadrícula
pero que pasa
que a lo mejor
esto
lo hacéis
para todos los elementos
pero algún elemento
en concreto
lo queréis cambiar
por ejemplo
el first child
que es el verde
pues podéis decir
vale
este
quiero que se justifique
a sí mismo
al centro
y así vais a ver
vale
que sea centrado
podéis hacerlo
con los que queráis
podéis decirle
poder
uno por defecto
que sea
pues al principio
al final
centrarlo
o estirar
para que ocupe
todo el espacio
y los que queráis
podéis justificarlo
lo podéis alinear
en el centro
al final
como queráis
y esto muchas veces
seguro
que cuando veáis
ahora el layout
os daréis cuenta
de este tipo de cosas
de ah mira
aquí han hecho esto
porque han conseguido
que este se alinee así
vale
pues lo podéis hacer
bueno
en este caso
para que lo entendáis
ahí tenéis
start
end
y center
serían los tres
más importantes
aquí hay otros
como por ejemplo
baseline
que sería como
al principio también
que esto también
depende de la dirección
tenéis el normal
que sería el por defecto
que funciona muy parecido
a stretch
y ya está
vale
esto sea
justify items
tendríamos también
la alineación
en bloque
que sería como
de arriba abajo
para nosotros
que sería
align items
y nos pasaría lo mismo
si queremos que se alinee
arriba
para nosotros
sería al principio
al final
o si lo queremos
centrar
vale
y se queda centrado
centrado
no parece
o sea no se ve fácilmente
pero fíjate la diferencia
vale
y lo mismo esto
también podríamos utilizar
el align self
para que pase
lo mismo que hemos visto
para cambiar uno en concreto
un item en concreto
lo podríamos poner
podemos justificarlo
o sea podemos poner
alinear y justificar
vale
entonces ahora
lo que vamos a ver
es que nos queda
podríamos centrarlo
de las dos formas
podríamos decir
que se centre
y fíjate que dentro
de la cuadrícula
que si lo veis aquí
lo vais a ver más claro
vale
fíjate la cuadrícula
esta sería la celda
de la cuadrícula
pero claro
si estamos centrando
el elemento
verticalmente
y horizontalmente
no confundáis
el tamaño
de la cuadrícula
con el tamaño
del elemento
que esto es un error
muy común
porque alguien puede pensar
pero Midu
si tú me has dicho
que una fracción
era de tanto espacio
no sé qué
no sé cuánto
y aquí estás poniendo
50 píxeles
y yo te diré
es que eso es lo que
ocupa la cuadrícula
no es lo que ocupa
el elemento
si tú lo que quieres
es que el elemento
se estire
y ocupe toda la cuadrícula
pues aparte
que lo puedes utilizar
dejarlo por defecto
lo que tienes que utilizar
es el stretch
vale
que es el de estirar
y entonces lo que hace
es estirarse
y ocupar todo el espacio
pero los tamaños
de los que hablamos aquí
son los de la cuadrícula
no de los elementos
por lo tanto
si al final
lo que hace es
centrar el elemento
dentro de la cuadrícula
su tamaño
se va a ver reducido
porque ya no se está estirando
sino que se está centrando
y dependerá del contenido
del elemento
que será más grande
o más pequeño
o sea que
súper importante
vale
esto sería para los elementos
los items que tenemos
pero de la misma forma
también podemos
centrar el contenido
como
centrar
alinear el contenido
como un todo
o sea
todo el bloque
todo el contenido
de la cuadrícula
si miramos aquí
y miráis la cuadrícula
fijaos que la cuadrícula
el container
sería todo esto
¿no?
pero la cuadrícula
solo ocupa
esta parte de aquí
la parte esta
que tenemos
con la raya amarilla
todo lo que tenemos abajo
no es parte
de la cuadrícula
es espacio
que ha quedado vacío
porque no ha necesitado
la cuadrícula
llegar hasta ahí
¿por qué?
porque le hemos añadido
aquí una altura
de 300 píxeles
si se lo quitamos
vamos a ver que la cuadrícula
justamente
ocupa lo mismo
porque tiene sentido
es el único contenido
que tiene
pero pensad
que podríamos tener
otros contenidos
podríamos tener
otras cosas
y que al final
quede un espacio vacío
que vamos a querer gestionar
en este caso
lo estoy simulando así
pero para que tengáis claro
entonces
imaginad que
la cuadrícula
tal y cual
como ahora está quedando
fijaos que está pegada arriba
pues podéis decir
bueno
yo lo que me gustaría
es alinear este contenido
lo mismo pasaría
con el ancho
pongamos que tenemos
un ancho de 500 píxeles
vamos a poner 500 píxeles
y las columnas
vamos a poner que sean
50 píxeles
ah mira
vamos a hacer esto
vale
y vamos a poner
que sea 300 píxeles
vale
claro
imaginad que podríamos
tener un espacio
que dentro tengamos
esta cuadrícula
que solo ocupa
este espacio
pero tenemos
más espacio
a su alrededor
entonces
¿qué podríamos hacer?
podríamos alinear
todo el contenido
en línea
o sea
horizontalmente
con el justify content
por ejemplo
para centrarlo
o por ejemplo
para dejarlo al final
o también
lo que podríamos decir aquí
es decirle que
distribuya el contenido
para que tenga espacio
alrededor
y esto sería
horizontalmente
¿vale?
porque sería en línea
pero lo mismo
podríamos decirle
con el align content
aquí le podemos decir
que lo podríamos centrar
y lo haría verticalmente
y fijaos
que lo que está pasando aquí
es que si utilizáis
un align content center
y un justify content center
estáis centrando
los elementos
¿vale?
que muchas veces
pues así
tendréis una explicación
de cómo lo haríamos
estaríamos centrando
el contenido
tanto verticalmente
como horizontalmente
y así lo tendrías
de hecho
la forma más corta
de conseguir esto
es hacer un place content center
y esto lo que hace
es aplicar
tanto el justify
como el align
verticalmente
y horizontalmente
y así tendrías
centrado
todos los elementos
todo el contenido
¿vale?
todo el contenido
todo el contenido
estaría centrado
tanto verticalmente
como horizontalmente
que sepáis
que hay otros valores
que son interesantes
yo que sé
pues si ponéis
el justify content
tenéis el space between
también
muy parecidos
a los que tenéis en flex
¿vale?
el align
lo podríamos poner
center
y el content
perdón
no el items
¿vale?
y ya lo tendríamos
la diferencia
el contenido
es todo el contenido
como la caja
la cuadrícula
la grilla
¿vale?
sería todo el contenido
todo el contenido
o sea
todo esto
sería lo que estamos
moviendo
como un bloque
el items
o sea
el content
es el contenido
como el todo
y el item
sería cada uno
de los elementos
acuérdate
porque items
es plural
y se refiere a más
de una cosa
y content
es singular
y solo se refiere a una
¿vale?
así que con eso
ya sabrías
perfectamente
centrar un div
con grid
¿ese space between
se puede definir
espacial de separación?
no
porque el space between
lo que hace es separar
exactamente
los elementos
igual
¿vale?
y el around
lo que está haciendo
es poner la misma separación
al revés
si lo que quieres
es cambiar la separación
lo que tienes que hacer
por ejemplo
pones center
center
¿vale?
y en el gap
tú aquí le pones
lo que tú quieras
por ejemplo
un pixel
10 pixels
y ahí tú le puedes indicar
cuál es la separación
si de fútbol
se tratara
mi dude
sería Messi
con esta clase
se ganaría
su noveno
balón de oro
bueno
muchas gracias
y aquí viendo
por milésima vez
cómo se centra un div
bueno
pero al final
en el curso de CSS
ya hemos visto
tres formas
con el position absolute
lo hemos visto también
con el display flex
y ahora lo hemos visto
también para el display grid
son weiß现在
y ahora lo hemos visto
y ahora lo hemos visto
lo hemos visto
en un nueva