Bienvenido de nuevo a esta lección, seguiremos trabajando con la grilla de arranque; en particular, hay
dos características principales que quiero resaltar.
La primera es que quiero abordar los cuatro tamaños diferentes que mencioné brevemente.
Hemos estado trabajando con la columna. Elgie no ha hablado sobre lo que eso significa y hay otros tres
tamaños con los que esto funcionará.
También quieren mostrarle cómo podemos anidar cuadrículas dentro de otras cuadrículas para dividir aún más esas 12
unidades en pedazos más pequeños.
comenzar volviendo al navegador y echando un vistazo a la demostración que construimos en la última lección.
Pero empiece hablando de los cuatro tamaños que voy a
Así que tenemos dos filas, una que tiene 12 columnas, una que tiene tres en blanco y veo lo que ocurre
mientras cambio el tamaño de las cosas de la ventana, y luego llegamos a un punto de quiebre justo
donde todo cambia en cada columna.
Ahora ocupa 12 unidades completas y se acumulan una encima de la otra y, a medida que cambian
de tamaño, no notarás ningún cambio.
Todos continúan ocupando 12 unidades y se apilan uno encima del otro.
Pero en realidad hay cuatro tamaños diferentes que podemos especificar para que podamos tener cuatro diseños diferentes.
En este momento se trata de un diseño móvil que es un acceso muy pequeño.
Entonces nos volvemos demasiado pequeños, que es como una disposición de una tableta y luego un medio que está justo aquí.
Esto sería en una computadora portátil o en una ventana del navegador más pequeña y luego grande que tenemos aquí.
Así que no parece que haya mucha diferencia, excepto aquí cuando vamos entre
grandes.
Pero hay cuatro tamaños y podemos especificar relaciones y proporciones para cada uno de esos tamaños.
Entonces, en los muelles de arranque bajo las opciones de cuadrícula aquí, el sistema de cuadrícula puede ver que hay una tabla
y nos muestra los cuatro tamaños diferentes.
Así que hay dispositivos extra pequeños como teléfonos que pequeños dispositivos que son tabletas, dispositivos de escritorio, dispositivos grandes o
escritorios más grandes que tienen más de mil doscientos píxeles de ancho y cada uno tiene un prefijo que
podemos usar para que el acceso a la columna sea realmente pequeño.
S. METRO. es pequeño M. RE. es mediano y LG es grande, que es lo que hemos estado usando.
Entonces, digamos que quiero que mi diseño permanezca igual en el gran punto de interrupción.
Y luego, cuando cambiemos al medio justo aquí, quiero estas 12 columnas que cada una ocupa una sola unidad.
Quiero que cada uno tome dos unidades en su lugar.
Así que terminaremos con seis cruzando.
Y luego otros 6 a continuación.
Así que centrémonos en eso y simplifiquemos las cosas.
De hecho, me desharé de nuestra segunda fila por el momento.
Entonces, todo lo que tenemos es esto aquí mismo.
Entonces, cuando lleguemos a este punto intermedio, no quiero que esto suceda.
En cambio, quiero seis columnas para hacer eso.
Solo agrego otra clase.
Así que le haré eso a cada uno y va a ser medio columna.
Entonces, cuando esta cuadrícula se establece en tamaño mediano, queremos que cada uno ocupe dos unidades y ahorraremos.
Ahora vamos y refrescamos.
Hazlo a tamaño completo.
Nada cambia porque estamos en el gran tamaño.
Pero ahora cuando cambio a medio aquí mismo.
Observe que cada uno ocupa dos unidades ahora y tenemos seis cruzando.
Y si sigo reduciéndolo, tocamos el pequeño punto de quiebre y ahí es donde cambia donde cada
columna ahora recorre 12 unidades completas y se amontonan una encima de la otra.
Así que volvamos y leamos regresemos a nuestro sublime y revivamos nuestra vieja grilla.
Así que nos desharemos de este porque no es tan común tener realmente 12
componentes diferentes.
Por lo general, trabajas con tres o cuatro, a veces seis, pero 12 columnas individuales es bastante raro.
Volvamos a esto y lo que haremos es tratar de recrear ese juego de cuadrícula del calendario de
giras de Olafur Arnold aquí.
Entonces comienza a las cuatro a cruzar.
Entonces nos encogemos.
Hay un punto de quiebre medio y todavía estamos en cuatro y luego llegamos al pequeño punto de quiebre y vamos a dos
en el otro lado.
Y luego el móvil x o pequeño es uno.
Entonces, eso es lo que intentaremos y recrear, no el contenido, solo la estructura.
Así que volveremos aquí.
Y queremos comenzar con cuatro yendo a través.
Lo que significa que cada uno ocupa tres unidades y luego podemos cambiar el texto aquí.
Y digámoslo o fecharlo.
Entonces, si estuviéramos frescos, deberíamos tener cuatro columnas, lo cual hacemos, que es exactamente
lo que comienza con cuatro.
Y la única diferencia realmente es el contenido real.
Entonces, en lugar de cada columna, simplemente agregaremos un H tres un botón de un párrafo y cualquier otro contenido que
necesitemos un poco de H. R. parece y aún tendríamos el mismo espacio.
Todo bien.
Entonces, el próximo punto de quiebre es cuando lleguemos al medio.
Se queda a las cuatro.
Entonces, lo que podría pensar que tenemos que hacer es especificar el punto de quiebre medio, de modo que cuando
lo hagamos, cada uno de ellos ocupará tres unidades.
Podemos volver a sublime y agregar eso y otra vez llamarlos medio tres y guardar y cada uno comienza en tres unidades, golpeamos medio y
se quedan en tres unidades y luego nos dirigimos a pequeño y ahora son 12
unidades nuevamente.
Y lo que queremos para seguir esto es que cuando alcanzamos el tamaño pequeño, ahora cada uno ocupa seis unidades
para que podamos entrar aquí y agregar eso en la columna pequeña 6.
Por lo tanto, el tamaño grande de cada uno de estos requiere un 25 por ciento de tres unidades de 12 en el tamaño mediano.
La misma cosa.
Toman un 25 por ciento y luego, en el tamaño pequeño que es para tabletas, cada uno toma un 50 por ciento.
Así que refresquemos cada toma de tres minutos y luego tres unidades, luego damos en pequeños.
Y ahora cada uno ocupa seis unidades y luego tuvimos un tamaño extra pequeño.
Luego, automáticamente ocupan las 12 unidades completas, que es lo que queremos.
Puedes ver cuando golpeamos pequeño queremos que ocupen una unidad que cruza.
Todo bien.
Entonces tenemos que hay un pequeño cambio que podemos hacer si volvemos a sublime.
Verás que estamos especificando estas tres unidades dos veces para las grandes y medianas.
Podemos deshacernos de la columna tres grandes y poner el medio allí y el programa de arranque sabrá que porque estamos configurando el medio
para que sea tres y no estamos estableciendo explícitamente el tamaño grande solo tomará lo que establezcamos
para el medio y lo aplicaremos a lo grande
Entonces funciona de la misma manera.
Nada ha cambiado.
Ya he refrescado parece idéntico nuestro punto de quiebre medio todavía está allí y nuestros pequeños trabajos.
Entonces no tenemos que especificar eso dos veces.
Así que déjame venir N. Z. nos deshacemos de eso y funciona exactamente de la misma manera.
Y, de hecho, si echamos un vistazo vamos al sitio web.
Apuesto a que si inspeccionamos cada uno de estos, verá que allí vamos.
Columna pequeña seis columnas media tres.
Exactamente lo que teníamos ahora que hemos cubierto esos cuatro tamaños diferentes.
Con suerte, puede ver cuán versátil y útil puede ser el sistema de grillas.
Volvamos.
Y ahora me dirigiré a las cuadrículas de anidación.
Supongamos que en lugar de esta primera columna quiero dividirla por la mitad y tener algo en el
lado izquierdo y algo en el lado derecho.
De hecho, puedo ir y agregar otra fila dentro de allí.
Entonces la clase es igual a la fila
Y luego dentro de esa fila puedo agregar un div con una clase igual a la columna
y todo demasiado grande para la columna de seis grandes y otra columna de gran tamaño 6 y voy a escribir algo de texto aquí a
la mitad y la otra mitad.
Vamos a cambiarlo a la primera mitad y la otra mitad y ahorraremos y vamos a darles un rosa clásico.
Entonces, lo que hemos hecho ahora es que tendremos tres pasando por uno o cuatro cruzando.
Uno dos tres cuatro y en el primero lo hemos dividido en otras 12 unidades agregando otra fila y
estamos usando los primeros seis para decir algo y estamos usando los segundos seis para
decir algo más guardar o actualizar .
Ahí lo tienes y lo haces aún más obvio.
Déjame darles otra clase.
Vamos a llamarlo naranja.
No existe todavía
Y esto se define como naranja y tendrá un fondo naranja y vamos a agregar en orden un
píxel rojo sólido y luego dasht OK.
Refresque usted puede ver ahora que todavía tenemos estas cuatro cosas al otro lado.
Cada uno ocupa tres unidades pero dividimos el primero en seis unidades y seis unidades al agregar esa
fila y debes agregar la fila.
No puede simplemente comenzar a hacer esto donde tiene una columna en lugar de una columna.
Debe haber una fila.
Y hagamos uno más.
Pongamos este último aquí en seis pequeños pedazos dentro.
Entonces, necesitamos agregar una fila dentro de esa clase div igual a fila en lugar de allí.
Necesitamos otro div y tendremos seis de estos en los que tenemos una columna de dos grandes cada una ocupando
dos de 12 unidades.
Y queremos seis y luego vamos a ir a cada uno y agreguemos esa clase naranja solo para
que podamos verlos.
DE ACUERDO.
Así que tenemos cuatro columnas grandes que cruzan la primera que dividimos por la mitad.
El último lo dividimos en seis partes y no se puede ver nada, así que no pusimos ningún texto allí.
Así que vamos a hacer eso.
O más bien en realidad es solo darle un a o un alto a la clase naranja.
Vamos a hacerlos cada 50 píxeles.
Y si actualizo, verá que ahora todo lo que tiene naranja esa clase naranja ocupa 50 píxeles
de altura.
Así que tenemos nuestras dos columnas divididas uniformemente y luego nuestras seis columnas divididas en partes iguales dentro de
estas cuatro columnas de nivel superior divididas uniformemente.
Así que esa es todas las piezas importantes del sistema de grillas.
En resumen, tenemos 12 unidades en cada fila.
Los divides como quieras.
Hay cuatro tamaños grandes, medianos, pequeños, extra pequeños y puedes reasignar esas 12 unidades en cualquiera de esos cuatro puntos
de quiebre esos cuatro tamaños diferentes.
Y así es como terminas con estos bonitos diseños receptivos y, en general, el patrón que ves es
el de los sitios para dispositivos móviles.
de la mayoría de los sitios, su contenido se apilará uno encima del otro como lo haríamos aquí si lo redujera.
Por lo tanto, en el tamaño extra pequeño
Este es el diseño común en el dispositivo móvil en el que no tiene múltiples piezas de contenido en la misma fila.
DE ACUERDO.
Regresemos a lo sublime.
Asegúrate de hablar sobre los tres objetivos principales.
Así que hablamos sobre el propósito del punto del sistema de cuadrícula que nos ayuda a establecer las cosas.
Es impresionante.
Comprenda los cuatro tamaños diferentes.
Esas son redes grandes, pequeñas, pequeñas y luego anidadas a la derecha.
Y eso es lo que estamos haciendo aquí donde agregamos una fila en lugar de una columna y luego podemos
completar esa fila con otras columnas adicionales en el siguiente video.
Vamos a construir una cuadrícula de imagen simple usando el sistema de cuadrícula