Vamos a continuar con el número 5.
Puede ser que dice tres columnas y dice que se grit.
Tal vez es bueno pero cuál es la diferencia entre tres columnas y tres columnas iguales.
Bueno básicamente vamos a ver como tener una columna más grande y dos un poco más pequeñas.
Tres columnas al final pero no todas del mismo tamaño.
Una va a ser más grande abrimos este Index y botón derecho de nueva cuenta para arrancar el servidor
y abrimos el CSS puedes ver que en este caso nuestro HTML es un poco diferente.
Tenemos un dip con una Creasy llamada contenedora eso es lo que mantiene el contenido centrado.
Como vimos casi al inicio y después tenemos este Main un poco más de scroll tenemos un aceite y después
tenemos otro aceite.
Puedes tener muchos aceite en un HTML no hay ningún problema.
Entonces básicamente tenemos todo esto como la etiqueta Main y este es un aceite y este es otro aceite
y voy a abrir este ejemplo también en Firefox Pertuz para poder ver el kit correctamente abrir lo que
viene siendo la cuenta stint y aquí vamos a colocar digamos una clase que se llama contenedor Grid ya
haciéndolo un poco más del mundo real contenedor Grid y esto no lo hemos creado en lo que viene siendo
el HTML.
Por lo tanto lo voy a colocar aquí también.
Recuerda esto más que nada porque Grid solamente afecta al primer nivel por lo tanto va a afectar el
me va a afectar el aceite y este otro aceite también vamos a abrir lo que viene siendo la hoja de estilos
y de nueva cuenta Roma media Willett 7 6 8 píxeles abrimos llaves que colocamos nuestro selector.
Primero habilitamos display Grid y después para definir las columnas recorras escrita en Empléate quórums
y hay muchas formas en las que puedes hacer esto.
Supongamos que quieres definieron grid de la siguiente forma que el contenido principal que es un poco
más grande mida 700 píxeles y tal vez el otro o los otros dos cada uno tenga una fracción.
Sin duda esta sintaxis es diferente aquí hizo falta guardar el archivo HTML asegúrate de guardar los
dos abrimos developer tools y puedes ver que se va a acomodar el contenido de esta forma.
Ahora voy a abrir los que vienen siendo el grid y puedes ver que tenemos el grid de la siguiente forma
puedes ver que vienen aquí 700 pixeles eso es lo que haces darle a esta área 700 pixeles y después lo
que haces estas fracciones es tomar el contenido restante por el tamaño restante y asignarles.
Mitad y mitad a cada uno de ellos.
Entonces es una forma en la que lo puedes hacer también puedes mezclar píxeles con fracciones sin ningún
problema ahora aquí también puedes colocar repeat dos coma F.R y va a funcionar también si guardas cambios
puedes ver que sigue funcionando correctamente.
Otra forma en la que lo puedes hacer es colocando digamos 70 60 por ciento 20 por ciento y 20 por ciento
puedes ver que se va a ver de la siguiente forma 60 por ciento tarea 20 aquí y 20 acá hay muchas formas
en las que lo puedes hacer un equivalente a esta sintaxis que está aquí escrita en Play Colombes y lo
vamos a colocar tres severe repeat 2 1 fr.
Aquí puedes ver que estamos creando 5 fracciones y cada fracción va a tener un 20 por ciento por lo
tanto este 13 F es igual a 60 por ciento y cada una de estas dos es 20 por ciento se ve un poco más
larga esta sintaxis pero sin duda es un poco más relacionada al estilo de grit.
Si guardas cambios puedes ver que se ve esta forma entonces tenemos tres columnas una más grande y dos
un poco más pequeñas y eso sobre lo que trataba este patrón de diseño.
Ahora puedes colocarlas de nueva cuenta Colunga y colocar digamos dos Ram de separación entre cada uno
de ellos y puedes ver que se ve bastante bien cómo se ven muchos blogs que tienen el contenido principal
y unas barras laterales usualmente es así como lo lograrías puedes ver lo sencillo que lo hace grit.
Hasta aquí hemos visto que Guides menos código en realidad en el siguiente video veíamos el mismo ejemplo
ahora con Flex Box.
Así que continuamos en el siguiente vídeo.