1
00:00:00,390 --> 00:00:05,640
Bienvenido de nuevo a esta lección, seguiremos trabajando con la grilla de arranque; en particular, hay

2
00:00:05,640 --> 00:00:07,550
dos características principales que quiero resaltar.

3
00:00:07,590 --> 00:00:12,070
La primera es que quiero abordar los cuatro tamaños diferentes que mencioné brevemente.

4
00:00:12,150 --> 00:00:16,950
Hemos estado trabajando con la columna. Elgie no ha hablado sobre lo que eso significa y hay otros tres

5
00:00:16,950 --> 00:00:18,530
tamaños con los que esto funcionará.

6
00:00:18,600 --> 00:00:24,270
También quieren mostrarle cómo podemos anidar cuadrículas dentro de otras cuadrículas para dividir aún más esas 12

7
00:00:24,270 --> 00:00:25,820
unidades en pedazos más pequeños.

8
00:00:26,250 --> 00:00:31,200
comenzar volviendo al navegador y echando un vistazo a la demostración que construimos en la última lección.

9
00:00:31,200 --> 00:00:34,100
Pero empiece hablando de los cuatro tamaños que voy a

10
00:00:34,290 --> 00:00:41,700
Así que tenemos dos filas, una que tiene 12 columnas, una que tiene tres en blanco y veo lo que ocurre

11
00:00:41,700 --> 00:00:48,660
mientras cambio el tamaño de las cosas de la ventana, y luego llegamos a un punto de quiebre justo

12
00:00:48,660 --> 00:00:50,810
donde todo cambia en cada columna.

13
00:00:50,850 --> 00:00:57,420
Ahora ocupa 12 unidades completas y se acumulan una encima de la otra y, a medida que cambian

14
00:00:57,420 --> 00:00:59,400
de tamaño, no notarás ningún cambio.

15
00:00:59,460 --> 00:01:03,140
Todos continúan ocupando 12 unidades y se apilan uno encima del otro.

16
00:01:03,330 --> 00:01:08,620
Pero en realidad hay cuatro tamaños diferentes que podemos especificar para que podamos tener cuatro diseños diferentes.

17
00:01:09,030 --> 00:01:13,850
En este momento se trata de un diseño móvil que es un acceso muy pequeño.

18
00:01:14,040 --> 00:01:20,730
Entonces nos volvemos demasiado pequeños, que es como una disposición de una tableta y luego un medio que está justo aquí.

19
00:01:20,730 --> 00:01:26,590
Esto sería en una computadora portátil o en una ventana del navegador más pequeña y luego grande que tenemos aquí.

20
00:01:26,940 --> 00:01:31,340
Así que no parece que haya mucha diferencia, excepto aquí cuando vamos entre

21
00:01:31,350 --> 00:01:31,870
grandes.

22
00:01:31,980 --> 00:01:38,330
Pero hay cuatro tamaños y podemos especificar relaciones y proporciones para cada uno de esos tamaños.

23
00:01:38,460 --> 00:01:44,850
Entonces, en los muelles de arranque bajo las opciones de cuadrícula aquí, el sistema de cuadrícula puede ver que hay una tabla

24
00:01:44,850 --> 00:01:46,900
y nos muestra los cuatro tamaños diferentes.

25
00:01:47,130 --> 00:01:53,220
Así que hay dispositivos extra pequeños como teléfonos que pequeños dispositivos que son tabletas, dispositivos de escritorio, dispositivos grandes o

26
00:01:53,400 --> 00:01:59,190
escritorios más grandes que tienen más de mil doscientos píxeles de ancho y cada uno tiene un prefijo que

27
00:01:59,190 --> 00:02:02,940
podemos usar para que el acceso a la columna sea realmente pequeño.

28
00:02:03,000 --> 00:02:08,630
S. METRO. es pequeño M. RE. es mediano y LG es grande, que es lo que hemos estado usando.

29
00:02:09,030 --> 00:02:14,170
Entonces, digamos que quiero que mi diseño permanezca igual en el gran punto de interrupción.

30
00:02:14,340 --> 00:02:22,020
Y luego, cuando cambiemos al medio justo aquí, quiero estas 12 columnas que cada una ocupa una sola unidad.

31
00:02:22,800 --> 00:02:25,320
Quiero que cada uno tome dos unidades en su lugar.

32
00:02:25,320 --> 00:02:27,670
Así que terminaremos con seis cruzando.

33
00:02:27,690 --> 00:02:29,510
Y luego otros 6 a continuación.

34
00:02:29,820 --> 00:02:32,880
Así que centrémonos en eso y simplifiquemos las cosas.

35
00:02:33,100 --> 00:02:36,360
De hecho, me desharé de nuestra segunda fila por el momento.

36
00:02:36,600 --> 00:02:39,170
Entonces, todo lo que tenemos es esto aquí mismo.

37
00:02:39,210 --> 00:02:43,730
Entonces, cuando lleguemos a este punto intermedio, no quiero que esto suceda.

38
00:02:43,740 --> 00:02:48,510
En cambio, quiero seis columnas para hacer eso.

39
00:02:48,510 --> 00:02:50,740
Solo agrego otra clase.

40
00:02:50,940 --> 00:02:58,120
Así que le haré eso a cada uno y va a ser medio columna.

41
00:02:58,200 --> 00:03:05,600
Entonces, cuando esta cuadrícula se establece en tamaño mediano, queremos que cada uno ocupe dos unidades y ahorraremos.

42
00:03:05,640 --> 00:03:07,200
Ahora vamos y refrescamos.

43
00:03:07,380 --> 00:03:09,120
Hazlo a tamaño completo.

44
00:03:09,120 --> 00:03:12,380
Nada cambia porque estamos en el gran tamaño.

45
00:03:12,570 --> 00:03:16,190
Pero ahora cuando cambio a medio aquí mismo.

46
00:03:16,200 --> 00:03:21,380
Observe que cada uno ocupa dos unidades ahora y tenemos seis cruzando.

47
00:03:21,630 --> 00:03:28,230
Y si sigo reduciéndolo, tocamos el pequeño punto de quiebre y ahí es donde cambia donde cada

48
00:03:28,230 --> 00:03:33,480
columna ahora recorre 12 unidades completas y se amontonan una encima de la otra.

49
00:03:33,900 --> 00:03:41,040
Así que volvamos y leamos regresemos a nuestro sublime y revivamos nuestra vieja grilla.

50
00:03:41,130 --> 00:03:46,410
Así que nos desharemos de este porque no es tan común tener realmente 12

51
00:03:46,410 --> 00:03:47,160
componentes diferentes.

52
00:03:47,160 --> 00:03:53,300
Por lo general, trabajas con tres o cuatro, a veces seis, pero 12 columnas individuales es bastante raro.

53
00:03:53,400 --> 00:03:59,550
Volvamos a esto y lo que haremos es tratar de recrear ese juego de cuadrícula del calendario de

54
00:03:59,550 --> 00:04:01,250
giras de Olafur Arnold aquí.

55
00:04:01,590 --> 00:04:04,200
Entonces comienza a las cuatro a cruzar.

56
00:04:04,200 --> 00:04:05,400
Entonces nos encogemos.

57
00:04:05,550 --> 00:04:12,060
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

58
00:04:12,060 --> 00:04:13,100
en el otro lado.

59
00:04:13,140 --> 00:04:15,580
Y luego el móvil x o pequeño es uno.

60
00:04:15,990 --> 00:04:20,530
Entonces, eso es lo que intentaremos y recrear, no el contenido, solo la estructura.

61
00:04:20,790 --> 00:04:22,080
Así que volveremos aquí.

62
00:04:22,650 --> 00:04:25,740
Y queremos comenzar con cuatro yendo a través.

63
00:04:25,740 --> 00:04:31,860
Lo que significa que cada uno ocupa tres unidades y luego podemos cambiar el texto aquí.

64
00:04:31,860 --> 00:04:35,510
Y digámoslo o fecharlo.

65
00:04:35,610 --> 00:04:43,470
Entonces, si estuviéramos frescos, deberíamos tener cuatro columnas, lo cual hacemos, que es exactamente

66
00:04:43,470 --> 00:04:46,320
lo que comienza con cuatro.

67
00:04:46,320 --> 00:04:48,720
Y la única diferencia realmente es el contenido real.

68
00:04:48,720 --> 00:04:55,650
Entonces, en lugar de cada columna, simplemente agregaremos un H tres un botón de un párrafo y cualquier otro contenido que

69
00:04:55,650 --> 00:05:00,190
necesitemos un poco de H. R. parece y aún tendríamos el mismo espacio.

70
00:05:00,600 --> 00:05:01,200
Todo bien.

71
00:05:01,200 --> 00:05:03,790
Entonces, el próximo punto de quiebre es cuando lleguemos al medio.

72
00:05:03,960 --> 00:05:05,840
Se queda a las cuatro.

73
00:05:06,300 --> 00:05:12,570
Entonces, lo que podría pensar que tenemos que hacer es especificar el punto de quiebre medio, de modo que cuando

74
00:05:12,570 --> 00:05:15,440
lo hagamos, cada uno de ellos ocupará tres unidades.

75
00:05:15,600 --> 00:05:26,810
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

76
00:05:26,840 --> 00:05:33,300
se quedan en tres unidades y luego nos dirigimos a pequeño y ahora son 12

77
00:05:33,290 --> 00:05:34,190
unidades nuevamente.

78
00:05:34,310 --> 00:05:42,610
Y lo que queremos para seguir esto es que cuando alcanzamos el tamaño pequeño, ahora cada uno ocupa seis unidades

79
00:05:43,400 --> 00:05:49,140
para que podamos entrar aquí y agregar eso en la columna pequeña 6.

80
00:05:49,400 --> 00:05:57,070
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.

81
00:05:57,120 --> 00:05:57,920
La misma cosa.

82
00:05:58,010 --> 00:06:04,730
Toman un 25 por ciento y luego, en el tamaño pequeño que es para tabletas, cada uno toma un 50 por ciento.

83
00:06:05,480 --> 00:06:12,980
Así que refresquemos cada toma de tres minutos y luego tres unidades, luego damos en pequeños.

84
00:06:13,040 --> 00:06:17,880
Y ahora cada uno ocupa seis unidades y luego tuvimos un tamaño extra pequeño.

85
00:06:17,940 --> 00:06:21,620
Luego, automáticamente ocupan las 12 unidades completas, que es lo que queremos.

86
00:06:21,810 --> 00:06:27,350
Puedes ver cuando golpeamos pequeño queremos que ocupen una unidad que cruza.

87
00:06:27,380 --> 00:06:28,010
Todo bien.

88
00:06:28,010 --> 00:06:33,240
Entonces tenemos que hay un pequeño cambio que podemos hacer si volvemos a sublime.

89
00:06:33,770 --> 00:06:39,560
Verás que estamos especificando estas tres unidades dos veces para las grandes y medianas.

90
00:06:39,560 --> 00:06:46,700
Podemos deshacernos de la columna tres grandes y poner el medio allí y el programa de arranque sabrá que porque estamos configurando el medio

91
00:06:46,740 --> 00:06:51,650
para que sea tres y no estamos estableciendo explícitamente el tamaño grande solo tomará lo que establezcamos

92
00:06:51,650 --> 00:06:54,320
para el medio y lo aplicaremos a lo grande

93
00:06:54,440 --> 00:06:55,880
Entonces funciona de la misma manera.

94
00:06:55,880 --> 00:06:56,650
Nada ha cambiado.

95
00:06:56,660 --> 00:07:02,420
Ya he refrescado parece idéntico nuestro punto de quiebre medio todavía está allí y nuestros pequeños trabajos.

96
00:07:02,420 --> 00:07:04,800
Entonces no tenemos que especificar eso dos veces.

97
00:07:05,300 --> 00:07:10,460
Así que déjame venir N. Z. nos deshacemos de eso y funciona exactamente de la misma manera.

98
00:07:10,520 --> 00:07:14,990
Y, de hecho, si echamos un vistazo vamos al sitio web.

99
00:07:15,000 --> 00:07:19,770
Apuesto a que si inspeccionamos cada uno de estos, verá que allí vamos.

100
00:07:19,780 --> 00:07:22,590
Columna pequeña seis columnas media tres.

101
00:07:22,790 --> 00:07:26,990
Exactamente lo que teníamos ahora que hemos cubierto esos cuatro tamaños diferentes.

102
00:07:27,070 --> 00:07:30,710
Con suerte, puede ver cuán versátil y útil puede ser el sistema de grillas.

103
00:07:30,750 --> 00:07:31,520
Volvamos.

104
00:07:31,740 --> 00:07:33,960
Y ahora me dirigiré a las cuadrículas de anidación.

105
00:07:34,310 --> 00:07:40,130
Supongamos que en lugar de esta primera columna quiero dividirla por la mitad y tener algo en el

106
00:07:40,130 --> 00:07:42,710
lado izquierdo y algo en el lado derecho.

107
00:07:42,800 --> 00:07:47,340
De hecho, puedo ir y agregar otra fila dentro de allí.

108
00:07:47,370 --> 00:07:49,230
Entonces la clase es igual a la fila

109
00:07:49,740 --> 00:07:56,300
Y luego dentro de esa fila puedo agregar un div con una clase igual a la columna

110
00:07:56,300 --> 00:08:06,620
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

111
00:08:06,710 --> 00:08:09,100
la mitad y la otra mitad.

112
00:08:09,360 --> 00:08:18,170
Vamos a cambiarlo a la primera mitad y la otra mitad y ahorraremos y vamos a darles un rosa clásico.

113
00:08:18,200 --> 00:08:24,000
Entonces, lo que hemos hecho ahora es que tendremos tres pasando por uno o cuatro cruzando.

114
00:08:24,000 --> 00:08:30,290
Uno dos tres cuatro y en el primero lo hemos dividido en otras 12 unidades agregando otra fila y

115
00:08:30,290 --> 00:08:35,420
estamos usando los primeros seis para decir algo y estamos usando los segundos seis para

116
00:08:36,330 --> 00:08:38,530
decir algo más guardar o actualizar .

117
00:08:38,960 --> 00:08:41,770
Ahí lo tienes y lo haces aún más obvio.

118
00:08:41,780 --> 00:08:43,280
Déjame darles otra clase.

119
00:08:43,400 --> 00:08:45,170
Vamos a llamarlo naranja.

120
00:08:45,370 --> 00:08:46,940
No existe todavía

121
00:08:46,940 --> 00:09:00,030
Y esto se define como naranja y tendrá un fondo naranja y vamos a agregar en orden un

122
00:09:00,140 --> 00:09:04,870
píxel rojo sólido y luego dasht OK.

123
00:09:05,540 --> 00:09:10,530
Refresque usted puede ver ahora que todavía tenemos estas cuatro cosas al otro lado.

124
00:09:10,520 --> 00:09:16,880
Cada uno ocupa tres unidades pero dividimos el primero en seis unidades y seis unidades al agregar esa

125
00:09:16,880 --> 00:09:19,160
fila y debes agregar la fila.

126
00:09:19,160 --> 00:09:22,520
No puede simplemente comenzar a hacer esto donde tiene una columna en lugar de una columna.

127
00:09:22,520 --> 00:09:23,980
Debe haber una fila.

128
00:09:24,260 --> 00:09:25,520
Y hagamos uno más.

129
00:09:25,910 --> 00:09:31,090
Pongamos este último aquí en seis pequeños pedazos dentro.

130
00:09:31,500 --> 00:09:39,770
Entonces, necesitamos agregar una fila dentro de esa clase div igual a fila en lugar de allí.

131
00:09:39,770 --> 00:09:48,770
Necesitamos otro div y tendremos seis de estos en los que tenemos una columna de dos grandes cada una ocupando

132
00:09:48,770 --> 00:09:50,310
dos de 12 unidades.

133
00:09:50,310 --> 00:09:58,070
Y queremos seis y luego vamos a ir a cada uno y agreguemos esa clase naranja solo para

134
00:09:58,080 --> 00:09:59,370
que podamos verlos.

135
00:10:00,440 --> 00:10:01,150
DE ACUERDO.

136
00:10:01,640 --> 00:10:06,540
Así que tenemos cuatro columnas grandes que cruzan la primera que dividimos por la mitad.

137
00:10:06,650 --> 00:10:12,410
El último lo dividimos en seis partes y no se puede ver nada, así que no pusimos ningún texto allí.

138
00:10:12,920 --> 00:10:14,200
Así que vamos a hacer eso.

139
00:10:14,270 --> 00:10:20,100
O más bien en realidad es solo darle un a o un alto a la clase naranja.

140
00:10:20,100 --> 00:10:22,950
Vamos a hacerlos cada 50 píxeles.

141
00:10:22,940 --> 00:10:29,330
Y si actualizo, verá que ahora todo lo que tiene naranja esa clase naranja ocupa 50 píxeles

142
00:10:29,340 --> 00:10:29,960
de altura.

143
00:10:30,260 --> 00:10:37,640
Así que tenemos nuestras dos columnas divididas uniformemente y luego nuestras seis columnas divididas en partes iguales dentro de

144
00:10:37,730 --> 00:10:40,880
estas cuatro columnas de nivel superior divididas uniformemente.

145
00:10:40,880 --> 00:10:43,700
Así que esa es todas las piezas importantes del sistema de grillas.

146
00:10:43,860 --> 00:10:46,420
En resumen, tenemos 12 unidades en cada fila.

147
00:10:46,560 --> 00:10:48,300
Los divides como quieras.

148
00:10:48,360 --> 00:10:56,360
Hay cuatro tamaños grandes, medianos, pequeños, extra pequeños y puedes reasignar esas 12 unidades en cualquiera de esos cuatro puntos

149
00:10:56,370 --> 00:10:58,900
de quiebre esos cuatro tamaños diferentes.

150
00:10:59,000 --> 00:11:03,050
Y así es como terminas con estos bonitos diseños receptivos y, en general, el patrón que ves es

151
00:11:03,410 --> 00:11:04,870
el de los sitios para dispositivos móviles.

152
00:11:04,880 --> 00:11:10,700
de la mayoría de los sitios, su contenido se apilará uno encima del otro como lo haríamos aquí si lo redujera.

153
00:11:10,700 --> 00:11:12,830
Por lo tanto, en el tamaño extra pequeño

154
00:11:12,840 --> 00:11:18,180
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.

155
00:11:19,080 --> 00:11:19,540
DE ACUERDO.

156
00:11:19,700 --> 00:11:20,990
Regresemos a lo sublime.

157
00:11:21,090 --> 00:11:23,290
Asegúrate de hablar sobre los tres objetivos principales.

158
00:11:23,610 --> 00:11:28,160
Así que hablamos sobre el propósito del punto del sistema de cuadrícula que nos ayuda a establecer las cosas.

159
00:11:28,160 --> 00:11:29,270
Es impresionante.

160
00:11:29,660 --> 00:11:31,690
Comprenda los cuatro tamaños diferentes.

161
00:11:31,700 --> 00:11:36,740
Esas son redes grandes, pequeñas, pequeñas y luego anidadas a la derecha.

162
00:11:37,040 --> 00:11:42,450
Y eso es lo que estamos haciendo aquí donde agregamos una fila en lugar de una columna y luego podemos

163
00:11:42,600 --> 00:11:45,790
completar esa fila con otras columnas adicionales en el siguiente video.

164
00:11:45,840 --> 00:11:48,650
Vamos a construir una cuadrícula de imagen simple usando el sistema de cuadrícula