Lasfito: [00:00:00] Hola chicos, qué tal? Bienvenidos a este tutorial sobre cómo crear columnas responsive para sitios web. Una aplicación que sea necesario. Y ojo que esto que ven en pantalla estas columnas. No hay flex box, no hay este grid, no hay JavaScript, no hay ninguna librería. Todo esto es CSS. Es una propiedad llamada columnas con la cual un ser trabajando el día de hoy es muy sencillo, muy útil. La verdad es que crea un efecto por demás placentero y el objetivo esencial es aprender cómo lograr esto. Vale, entonces para esto vamos a ira a nuestro editor, el editor de su preferencia. Vamos a estar trabajando con un HTML, un archivo html, un index y un style para los. Para el código CSS. Vale, entonces no tengo nada aquí en particular. Tengo el bullying Platte que nos genera por defecto el M.K. No, Emmet, Emmet Fordham y tengo aquí un diff, notarán, tengo un diff con la clase columnas y al interior del 10 hay varios párrafos. Estropeemos un párrafo de introducción, un párrafo de desarrollo y un párrafo de desenlace. Ahora mismo ya tenemos las columnas y si me voy al CCC verán como es que lo logré. Y con este de aquí. No se preocupen, vamos a estar revisando todos y cada uno de estos de estas propiedades. Vale, pero para comenzar aquí tenemos el texto sin edición. Para comenzar, me gustaría mostrarles que la propiedad la podemos añadir a cualquier bloque de texto, bien sea un div, sea un párrafo.
Lasfito: [00:01:48] Por ejemplo, aquí en este párrafo tenemos uno que sí que es intro. Si nosotros quisiéramos pudiéramos lograr que fuese solamente el intro el que tuviera las columnas. Cómo lo logramos? Muy sencillo. Ah, aquí [00:02:00] hay intro. Vamos a agregar la propiedad de Gowan. Com count a nos termina y11 si queremos. Dos columnas para el codo. Guardamos. Nos vinimos aquí y podremos ver que efectivamente, en el intro hay dos columnas. Una, dos. Entonces no es necesario agregar columnas a todo el texto. Podemos añadirlo a partes parciales. Por ejemplo, aquí en la introducción, a lo mejor en alguna cita, dependiendo del estilo que quieran trabajar y aquí vean que esto va cambiando de ancho según reducimos el tamaño. Pero fíjense que las columnas permanecen siendo dos. Aquí estamos muy pequeñitos Goods. Aquí estamos muy pequeñitos y este siempre va a haber dos columnas. Ahora esto es bueno y malo porque nos va a respetar el número. Pero qué pasa con el tema de la responsabilidad del Movete First? A lo mejor aquí quisiéramos que no fueran dos, aquí quisiéramos que fuera una. Y Chise lo extenderemos. Entonces ya fueran dos porque el ancho nos lo permite. Para eso lo que podamos hacer es bueno. Primero voy a agarrar esta, vamos a pasarla aquí a columnas. Atabaque todo el texto lo tenga. Ya vieron y bueno, queremos que sean responsivo.
Lasfito: [00:03:16] Cómo lo hacemos? Muy sencillo, en lugar de trabajar con el con el count. Lo que vamos a hacer es decir que queremos un count uif, UIF refiriéndonos al ancho. Vamos a poner cuál debiera ser el ancho ideal para nuestras columnas. En este caso, si estamos trabajando con teléfonos, por ejemplo, a lo mejor quisiéramos poner el ancho mínimo ideal porque va a variar dependiendo de cuestiones de estilo. Vamos a poner que nos gustaría que fueran 300 pixeles. Aquí le quitamos éste. Vamos a guardar los venimos para acá. Fíjense que aquí, como no consigue el ancho necesario, nada más nos mantiene una. Pero tan pronto incrementamos ya alcanzó el ancho de 300 píxeles y [00:04:00] ya nos permite tener dos. Pero antes no, Figón sigue aquí. Nada más nos tiene una. Aquí les estamos diciendo esencialmente que todas mis columnas mercedarias automáticas y todas debían tener por lo menos 300 píxeles aquí. No? No logré este por lo menos. Ah, bueno, si lo lograría, pero si se dirigiese captulo columna tendría menos de 300 píxeles. Entonces, por eso solo hay una aquí que tan pronto nos permite que la sostengan 300 nos creados y si continuamos incrementando nos crea 3 cada una con mínimo 300 sutta. Puede que tenga más y tan pronto hay suficiente espacio para que haya 4 con mínimo 300 que créenos la va a generar. Aquí están las cuatro.
Lasfito: [00:04:39] Y bueno, por mi resolución de pantalla sólo me permite cuatro. Pero vean que todo esto es automático, ok? Y esto es responsivo y funciona genial. Ahora, qué pasaría? Fíjense que aquí me genera 4 columnas. Que a lo mejor a mí no me interesa ya tener tantas columnas, pienso que en lugar de que sea bien, ya tanta columna sea de mal. Bueno, entonces yo podría ser una combinación de count count y colm UIF. De modo que le digo al navegador Oye, hazme alas de 300, pero me gustaría tener idealmente. 4 No digo 4, me gustaría tener acceso a 3. Qué le damos? Guardar? Déjenme quieto, estoy aquí. Qué le damos? Guardar y fíjense lo que va a pasar. Me va a respetar las trescientas y me va a respetar el 3 cuando sea posible. Obviamente aquí no le pueden meter tres columnas, pero el tema del 300 pixeles aquí nace 2, aquí me hace 3 tuadas de 300 y cuando hay espacio para 4 de 300 píxeles no me lo va a hacer porque me va a respetarla. La cuenta con cout. Entonces fíjense que aquí yo continúo incrementando, continúo incrementando y ya no se genera una cuarta. Entonces esto funciona bastante bien porque a final de cuentas podemos dejarlo todo aquí. Decláralo como quedamos, que reaccione [00:06:00] y fíjense que sin necesidad de utilizar media churris, lo cual está bastante genial. Ahora si va a estar trabajando con estas dos propiedades, yo les recomiendo, como podrán ver aquí abajo, que en lugar de tener esto trabajen con la propiedad de Count.
Lasfito: [00:06:14] Esto es, son lo que llamamos so%re and en css. Aquí podríamos poner crecien 3 y 300 pixeles. Aquí el orden no importa a diferencia de otras propiedades como como este como la sombra. Por ejemplo usar bux aquí la hora no importa. Yo puedo poner primero 3 y 300 y el resultado me lo mantiene así tanto como si pusiera 300 primero y luego el 3. Ok, aquí le doy guardar y fíjense qué. Me lo respeta y eso también podemos ocupar solamente una. Podemos borrar este decirle solamente me importa lo de 300 y aquí ya volveríamos al escenario donde me crea 4 columnas. Está bastante bien. Echen un vistazo, este aquí un pequeño consejo que se me ocurre notarán, por ejemplo, que aquí esta columna empieza una línea abajo y si yo la incremento, estos empiezan igual, se sigue presionando abajo y esto se debe. A que técnicamente este son un elemento de párrafo y por defecto, los estilos navegador siempre le meten margen al párrafo. Entonces aquí podríamos menera de decir hoy sabes que al párrafo el margin no el main tab, metedle este 0. Y ya con esto vamos a hacer que queden parejos todos. Ok, este es un pequeño consejito y adicional. Regresando al hecho de que tenemos el intro, tenemos el desarrollo.
Lasfito: [00:07:45] Imaginemos por un momento. Que yo no quiero que todo mi texto tenga, tenga columnas. Imaginemos que yo solo quiero que el desenlace y el desarrollo tengan columnas. No quiero que el intro [00:08:00] tenga columnas. Ahí lo que podríamos hacer es venir y crear este uno para intro, no perdonando para descenlace, otro para desarrollo. Pero eso sería repetirse. Sese sería trabajar en balde. Algo que podemos hacer es ocupar una propiedad que se llama. Com spam, spam como repelus a anchura, expansión, entonces que yo puedo venir y decir sabes que el lento cilindro tiene columnas? Quiero que. Me las elimines. Aquí le ponemos. Aquí nos salen las posibles opciones que vamos a ponerle. O es decir, que se expanda por todas las columnas? Si es que tuviese algún estilo aplicado. Y yo me vuelvo aquí al navegador y vean que ahora mi intro ya atraviesa todas las columnas. Generás entonces aquí tengo litro. Luego viene el desarrollo aquí bajito, que vendría al desarrollo y aquí vendría el desenlace. Entonces con esto logramos que atraviese. Con spam. Por defecto es este non? Ok, entonces esto es algo con lo cual podemos jugar. Y podría venir y poner aquí algo como creo que lo tengo así. Com span. Donemos ou. Y aquí lo mismo, fíjense el mismo efecto, de modo que sólo los deja aquí en sándwich, que claro, para este escenario hubiera sido más fácil agarrar el desarrollo y meterle columnas al desarrollo.
Lasfito: [00:09:31] Pero esto no es todo. Algo más que podemos ver es la propiedad de de regla que vamos a poner esto de aquí. Tenemos com. Ru sería como regla de columna, esto funciona muy similar a Soran de Bowler, que vamos a agregar el ancho. Mejor lo quiero de 2 pixeles. A lo mejor lo quiero este sólido. Y en negrito bla èxito le damos guardar y fíjense que me va a agregar esta especie de borde [00:10:00] entre las columnas y lo genial de esto es que es automático, eh? Aquí no tenemos que estar calculando que si va a estar a la derecha, que si este lo queremos acá y este no queremos que tenga, no tenemos que estar pensando en que si van a ser tres o dos iban a ser cuatro. Por ejemplo, vamos a ponerle vamos a quitar esto. Qué pasaría si fuesen cuatro? Bueno, se les pone el borde. Y aquí puedo ayudar con. con el espacio con que está muy pegadito, muy pegadito. Si este fuese un borde lo resolveríamos añadiéndole un este o un pairing, cierto, un relleno a los elementos. Aquí no vamos a agarrar, agarrar LasPalmas, añadir Haring. Lo que vamos a hacer es que vamos a añadirle un gap así, al igual que con. con width y al igual que muy próximamente este e con Flex Box también va a haber gap. Bueno, aquí con las columnas le podemos meter un gap y podemos venir y decir acomo Colom.
Lasfito: [00:11:01] Gaut Aquí está, decíamos métale. No lo sé. Diez píxeles de Kapp. Y aquí lo que va a pasar es que no me gusta. No me gusta Gargano, vamos a grados REM rumoraba muy poquito aquí hasta que está más espaciado con podrán ver ya no está chocando los dos someterle más Neutron de unos 4. Ya está más espaciado entonces? Pues al final de cuentas es una propiedad bastante útil. Claro, las propiedades van a ser tan útiles como como sea el objetivo y el estilo. Pero francamente, Shaw, que muy pocos conocen y que yo creo que podría funcionar bastante. Son de esas cosas que son buenas saber. Nunca está de que a lo mejor tienen que trabajar en un proyecto estilo EBV que tenga un Lucasfilm de periódico. Bueno, ya saben cómo lograr el efecto y entrenarse, que está preocupando por el ancho de los [00:12:00] Flex Box o está calculando las columnas y filas en el grid. Y bueno, básicamente esto es el tutorial ideado y claro, esto no es todo lo que tienen que saber. PD Mientras es lo básico, mínimo necesario, como siempre, les recomiendo que visiten la página del museo de MTN, ahí van a encontrar toda la información respecto a esta propiedad. Bueno, fuera de ellos, si les gustó olvidó. Por favor no olviden darle me gusta y suscribirse. Nos vemos pronto con más tutoriales.