Veamos cómo crearon diseños con un Stybar similar a los que vas a encontrar en la mayoría de sitios
de noticias o blogs.
Abrimos el Index y vamos a abrirlo con la IP server.
Copiamos esta regla para abrirlo en Firefox Developer Edition y anteriormente habíamos visto un diseño
con tres columnas iguales ya lo habíamos visto.
También vimos por ejemplo uno con tres columnas donde uno era más grande y dos más pequeño éste nada
más tiene un Sidebar por ejemplo si abrimos el Index en HTML tenemos un contenedor.
Después tenemos un artículo que es esta entrada de blog y después tenemos una suite únicamente una sait
que tiene este Gdeim con ese texto y este Gdeim con este otro texto entonces veamos cómo hacerlo con
Greed y con Flex Box y también que sea responsive abrimos CSS y de nueva cuenta voy a crear una clase
aquí crear una clase de contenedor que vamos a nombrarla conciban vamos a copiar esta clase y aquí voy
a colocar con Sidebar muy importante.
Se me olvida ponerlo es el Miria porque por default el tamaño que está bien y cómo se muestra está bien
me gusta.
Entonces ponemos este tamaño y colocamos nuestro selector y primer habilitamos display Grit y después
se recuerda se agrega lo que viene siendo gritã en Play Columns para definir el ancho de cada una de
las columnas tenemos que volver un poco a nuestro diseño porque aquí tienes que definir qué columna
es la que va a ser más grande usualmente pues tiene que ser el contenido.
Por lo tanto vamos a decir que la primera va a tomar el 70 por ciento y la segunda el 30 por ciento.
Si guardamos cambios y abrimos el código puedes ver qué se acomoda esta parte la izquierda y esta parte
a la derecha y si lo haces más pequeño bueno va a ser totalmente responsive y se va a adaptar correctamente
nos hace falta un poco aquí la separación.
Si recuerdas ya se utiliza Column gap con un gap y vamos a poner en dos si guardamos cambios vamos a
tener un poco de separación aquí creo que cuatro RAM sería mejor tener un poco más de separación ahora
hay diferentes formas de lograr las columnas.
Puedes incluso ponerle 7 Ferrey y otro 13 Ferrey y eso sería 70 y 30 es una forma puedes hacer así va
a funcionar bien.
Tal vez también quieres ponerlo el ancho en pixeles y el resto como una fracción también va a funcionar.
Incluso puedes ver cómo va a fluir el diseño.
Esta parte se mantiene porque tiene 700 pixeles y esta parte de al lado es la que fluye.
También va a estar bien.
No hay ningún problema va a depender mucho del diseño que estés elaborando.
Otras opciones tal vez tres F.R que sería 75 por ciento y una fracción porque si recuerdas toma el 100
por ciento y les asigna.
Es decir hacer una división bueno cuántas fracciones el usuario agregó son cuatro.
Bueno este tiene tres y usted tiene una es otra forma de hacerlo en esa parte Grit sí es un poco más
flexible.
Hay muchas formas en las que puedes generar esas columnas y puedes ver lo sencillo que fue implementar
un blog con otra columna.
Ahora tal vez tengas la duda de cómo colocar esta columna de este lado para ello tendrías que habilitar
gris y ese patrón de diseño se conoce como Layo Shifter es decir que cambia el layout dependiendo del
medio.
Pero quiero mostrarte cómo hacerlo será un poco más grande aquí y habilitamos Grit y puedes ver que
tenemos estos números ahora esta columna de aquí o mejor dicho este Sidebar tendría que ir de este lado.
Primer paso vamos a cambiar esta parte de aquí para qué seguir teniendo este contenido principal.
Ahora vamos a mover este Sidebar para acá y la forma en que lo vas a hacer seleccionando ese elemento
Sunass hoy puedes ver Saiga aquí y después le decimos en qué columna se va a colocar Grid Colom y por
lo tanto en vez de ser de dos a tres sería de uno de 1 a dos.
Para eso son útiles estos números de arriba guardamos cambios y puede ser que ya no está este lado se
coloca en la parte inferior porque también tenemos que posicionar el artículo pero ya puedes ver que
está este lado se habilitamos está en esta parte por lo tanto aquí vamos a colocar ãrtico y vamos a
ir de la columna de la 2 hacia la 3 tenemos 2 aquí y sería la 3.
Entonces guardamos cambios abrimos de nueva cuenta Firefox puedes ver que se posiciona correctamente
pero ahora nuestro aceite ya se perdió va a estar en la parte inferior.
Esto pasa porque como este artículo lo empuja y este se coloca en la parte inferior tenemos que agregarle
ahora un rol porque tenemos la columna la columna vendría siendo estos números de aquí arriba pero también
hay números de arriba hacia abajo entonces ver que tenemos aquí número 1 tenemos un número dos aquí
abajo tenemos el número tres nos interesa posicionarlo se conoce como Rou de arriba hacia abajo y ROP
del 1 al 2 y la sintaxis es similar a esta aunque sería Grit Rog del 1 al 2.
Guardamos cambios y puedes ver caras si ya se posiciona lo que viene siendo el Zaibat primero y después
el contenido y no tuvimos que hacer ningún cambio en el html solamente agregar esta clase y si lo haces
pequeño como esta parte está Numidia Cuadri bueno el aceite se va a mostrar después de lo que viene
siendo la entrada pero si lo hacemos más grande entra lo que viene siendo si ese es Grit y se coloca
del lado izquierdo entonces puedes ver lo sencillo que es crear un diseño un poco más avanzado con muy
pocas líneas de Grieve en el siguiente video veamos cómo hacer el mismo ejemplo con un Zaibat ahora
con Flex Box.