Vamos a continuar con el siguiente ejemplo que vendría siendo el Column drop es ese seguir este ejemplo
al menos abrirlo y lo voy a abrir en developer tools en trepé predichos.
Mejor dicho lo que viene siendo Column drop básicamente es un diseño en el que se colocan las columnas
una sobre otra.
Como se puede ver a quienes dispositivo móvil va teniendo diferentes variantes.
Por ejemplo en un dispositivo más grande digamos en uno más mediano más o menos de altura se recomendaría
como que hubiera aquí dos columnas bien abajo y por ejemplo que aquí fueran tres columnas.
Entonces se puede decir que vas teniendo diferentes columnas y dropped porque van cayendo cada vez que
se va haciendo más pequeño.
Entonces iniciando desde un dispositivo pequeño aquí está bien vamos a hacer lo siguiente Vamos a abrir
lo que viene siendo nuestro código tenemos nuestro Columbo vamos a abrir el CSS y puede ser que aquí
tenemos un contenedor tenemos el contenido principal y tenemos dos aceites a colocar aquí Golum Drop
se hace la clase para poder seleccionar o crear un selector de nuevas cuentas que me hizo falta Numidia
y voy a colocar un medio de Minuit desde 480 píxeles y coloco este aquí en este tamaño lo que vamos
a tener es un grito en Play Columns que van a ser dos columnas repeat 2 una F R Si guardás cambios y
abrís lo que viene siendo Firefox Developer Edition inspeccionará me aseguro de tener guardados ambos
Aquí tenemos nuestro Column drop y aquí me hace falta el display Grit Prakriti ahora si tenemos Gretta
puede ser que tenemos diferentes columnas lo que estoy tratando de lograr aquí es que si en un dispositivo
pequeño está en una debajo de otra pero más o menos aquí que este que dice tercera columna se expanda
hasta acá para ello voy a dar clic aquí Ingrid y nota como tenemos estas estos números en la parte superior
si se conoce se conocen como Grid Colom y nos permiten posicionar un elemento en el caso de este tercero.
Tercera columna tengo que posicionarlo desde el número 1 hasta el número 3.
Si inspeccionamos esta parte nota cómo se llama Segunda.
Por lo tanto voy a hacer lo siguiente me contó segunda y voy a colocar Grit Colom y vamos a decirle
que va a ir desde el número 1 hasta el número tres que está aquí guardamos cambios y puedes ver que
tenemos este diseño que va a tener diferentes columnas aquí van a ser unas columnas sobre otra un poco
más grande.
Tenemos dos columnas y una abajo y cuando lleguemos a un punto más grande quiero tres columnas por lo
tanto mi idea de nueva cuenta Minuit y colocamos 7 6 8 pixeles y aquí iba a ser con un drop.
El display Grid se hereda.
No necesito pasarlo de nueva cuenta hacia acá pero ahora voy a colocar Grid temple y Columns iba a ser
repeat 3 una F una fracción si guardamos cambios puedes ver que tengo tres columnas pero ahora tengo
que posicionar ésta de este lado de nueva cuenta abrimos nuestro Grid y habilitamos la vista de GRID
y puedes ver que este que dices segunda ahora tiene que ir del 3 al número 4 lo siguiente que iba a
colocar segunda Grid Colom y ahora va a ir del 3 al número 4.
Guardamos cambios y puedes ver que ya tenemos ahora sí tres columnas más pequeño tenemos dos columnas
arriba y abajo y finalmente más pequeño tenemos tres columnas y eso es lo que se conoce como un Column
drop dependiendo de diferentes tamaños bases colocando una columna más abajo es decir va cayendo en
la parte inferior y tenemos el diseño como lo deseamos que colocar Grit para tener la separación.
Anteriormente ya hemos visto Colunga pero de nueva cuenta Colunga ya no requiere este grids que sorprende
que va a ser un Reem y eso nos va a dar una separación de un Grammy en cada uno de ellos
ahora si luego más pequeño si quieres separación hacia abajo también aquí se ve bastante bien la separación
pero por el jardín si quieres separación hacia abajo tendrás que utilizar RoboCup y digamos que le pones
un RAM también eso nos dará separación hacia abajo.
Pero cuando tienes Gab en Colom y en Rou puedes colocar Gab únicamente y colocarle un Rémy eso es aplicar
tanto en columnas como en robot se ve bastante bastante bien en mi opinión.
Y puedes ver cómo se coló un drop de eso se trata de tener diferentes Aquaris y que las columnas vayan
cayendo de acuerdo a la cantidad de contenido que lo permita que se vea bien.
Por ejemplo si lo haces más pequeño aquí ya las tres columnas se ven muy apretadas pero un poco más
hacia abajo ya tenemos una columna en la parte inferior.
En el siguiente video veamos este mismo ejemplo pero ahora con Flex Box.
Así que continuamos en el siguiente vídeo.