All language subtitles for 061 Sizing Grid Columns and Rows.en_US

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian Download
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:01,480 --> 00:00:02,620 Welcome back 2 00:00:02,620 --> 00:00:06,270 after that hopefully helpful theory lecture. 3 00:00:06,270 --> 00:00:09,070 So now let's keep talking about creating 4 00:00:09,070 --> 00:00:12,463 and sizing grid columns and grid rows. 5 00:00:14,030 --> 00:00:17,520 So in our very first lecture about CSS Grid, 6 00:00:17,520 --> 00:00:20,190 we already learned how to create columns 7 00:00:20,190 --> 00:00:22,800 and rows like this. 8 00:00:22,800 --> 00:00:24,040 Right? 9 00:00:24,040 --> 00:00:29,040 Now for me, actually, most of the magic of CSS Grid comes 10 00:00:29,170 --> 00:00:33,840 from a very new unit, which is the fr unit. 11 00:00:33,840 --> 00:00:38,410 So using the fr unit here instead of pixels 12 00:00:38,410 --> 00:00:42,210 will allow us to very easily create flexible columns, 13 00:00:42,210 --> 00:00:44,280 and flexible rows. 14 00:00:44,280 --> 00:00:47,470 So again, using pixels allows us 15 00:00:47,470 --> 00:00:51,710 to only give these tracks very rigid dimensions. 16 00:00:51,710 --> 00:00:56,490 So these here are always 200 pixels, no matter what. 17 00:00:56,490 --> 00:01:00,550 So if I resize this like this or like this, 18 00:01:00,550 --> 00:01:04,450 the size always stays the same here of these columns. 19 00:01:04,450 --> 00:01:05,660 Right? 20 00:01:05,660 --> 00:01:10,660 So at some point it even over float the container, right? 21 00:01:11,150 --> 00:01:14,600 And so many times that is not what we need. 22 00:01:14,600 --> 00:01:18,610 And instead we want flexible columns and rows. 23 00:01:18,610 --> 00:01:20,470 And so, as I said in the beginning, 24 00:01:20,470 --> 00:01:24,220 for that we can use the new fr unit. 25 00:01:24,220 --> 00:01:25,620 So let's say for example, 26 00:01:25,620 --> 00:01:28,410 that we want this last column here 27 00:01:28,410 --> 00:01:31,193 to always fill up all the remaining space. 28 00:01:32,120 --> 00:01:34,580 Or maybe let's say this column. 29 00:01:34,580 --> 00:01:36,160 All right. 30 00:01:36,160 --> 00:01:38,730 Let's just decrease this spacing a little bit 31 00:01:38,730 --> 00:01:40,770 so we can see it better. 32 00:01:40,770 --> 00:01:42,083 Maybe this one as well. 33 00:01:43,150 --> 00:01:44,200 Okay. 34 00:01:44,200 --> 00:01:47,500 So clearly, here we have this empty space 35 00:01:47,500 --> 00:01:49,920 that is waiting to be filled. 36 00:01:49,920 --> 00:01:52,250 And so let's fill that very easily 37 00:01:52,250 --> 00:01:54,533 with this third column in this case. 38 00:01:55,730 --> 00:01:59,680 So the third column is this one, right? 39 00:01:59,680 --> 00:02:03,680 And so here, instead of specifying a fixed pixel value, 40 00:02:03,680 --> 00:02:05,383 let's specify '1fr', 41 00:02:06,910 --> 00:02:10,480 which stands for fractional or just fraction. 42 00:02:10,480 --> 00:02:12,930 And if I give it a save now, 43 00:02:12,930 --> 00:02:16,610 then you see that this column has been expanded 44 00:02:16,610 --> 00:02:20,070 in order to fill all the available empty space. 45 00:02:20,070 --> 00:02:24,590 So it's a little bit like setting flex to '1' in flexbox. 46 00:02:24,590 --> 00:02:25,860 Right? 47 00:02:25,860 --> 00:02:30,860 And so now as we adjust the size here of the window, 48 00:02:31,000 --> 00:02:33,950 then you see that it always keeps expanding 49 00:02:33,950 --> 00:02:36,253 to fit all the available space. 50 00:02:37,190 --> 00:02:39,400 So now here it's getting really small 51 00:02:39,400 --> 00:02:41,040 and so at a certain point, 52 00:02:41,040 --> 00:02:43,480 it still needs to fit the content. 53 00:02:43,480 --> 00:02:47,230 And so therefore then our grid will again overflow. 54 00:02:47,230 --> 00:02:49,610 But at all these other width, 55 00:02:49,610 --> 00:02:51,680 then this column here will attempt 56 00:02:51,680 --> 00:02:53,523 to fill all the remaining space. 57 00:02:54,590 --> 00:02:58,140 Okay, let's try the same with this one. 58 00:02:58,140 --> 00:03:00,913 So we can also set this one to the same value. 59 00:03:01,790 --> 00:03:05,770 So also '1fr' and so if we do that, 60 00:03:05,770 --> 00:03:08,570 then what do you think will happen to these two columns? 61 00:03:10,160 --> 00:03:11,610 And that's right. 62 00:03:11,610 --> 00:03:13,850 They are now the exact same size 63 00:03:13,850 --> 00:03:18,850 because they have the exact same value here for the fr unit. 64 00:03:19,270 --> 00:03:20,580 All right. 65 00:03:20,580 --> 00:03:24,080 And so again, they are now the same size 66 00:03:24,080 --> 00:03:28,330 and if we resize, then both of them are trying 67 00:03:28,330 --> 00:03:30,700 to fill the remaining empty space. 68 00:03:30,700 --> 00:03:33,980 And they do that basically in the same proportion, 69 00:03:33,980 --> 00:03:36,703 because they both have the same value here. 70 00:03:38,960 --> 00:03:40,210 All right. 71 00:03:40,210 --> 00:03:42,350 And I will show you in a second what happens 72 00:03:42,350 --> 00:03:44,653 when we give them here different values. 73 00:03:46,000 --> 00:03:47,180 All right. 74 00:03:47,180 --> 00:03:49,790 But for now, I actually want you to think 75 00:03:49,790 --> 00:03:52,020 about how we can create a grid 76 00:03:52,020 --> 00:03:55,360 where all the columns are the same width. 77 00:03:55,360 --> 00:03:58,800 So I want you to pause the video here and create a grid 78 00:03:58,800 --> 00:04:02,490 where all four columns have the same width. 79 00:04:02,490 --> 00:04:04,990 Then you can do the same for two columns 80 00:04:04,990 --> 00:04:06,780 and for three columns. 81 00:04:06,780 --> 00:04:08,080 All right. 82 00:04:08,080 --> 00:04:10,200 So experiment a little bit with that 83 00:04:10,200 --> 00:04:12,150 and I'll see you back here in a minute. 84 00:04:13,530 --> 00:04:14,770 All right. 85 00:04:14,770 --> 00:04:18,140 So hopefully you spent a minute doing that 86 00:04:18,140 --> 00:04:21,840 and here I will now actually copy this 87 00:04:21,840 --> 00:04:23,950 and then turn this one off, 88 00:04:23,950 --> 00:04:25,673 just so we keep this code here. 89 00:04:27,160 --> 00:04:30,240 But now hopefully you arrived at the solution 90 00:04:30,240 --> 00:04:33,710 that if we want four columns with the same width, 91 00:04:33,710 --> 00:04:36,163 we need to set all of these hear to '1fr'. 92 00:04:38,800 --> 00:04:41,410 So '1fr' all of them. 93 00:04:41,410 --> 00:04:43,730 And so now, no matter what, 94 00:04:43,730 --> 00:04:45,823 they will always have the same size. 95 00:04:48,080 --> 00:04:49,220 Right? 96 00:04:49,220 --> 00:04:52,270 So this is very powerful and very useful 97 00:04:52,270 --> 00:04:55,073 and we do this kind of thing all the time. 98 00:04:58,320 --> 00:05:00,630 And if we remove one of them, 99 00:05:00,630 --> 00:05:04,020 then we will end up only with three columns, 100 00:05:04,020 --> 00:05:06,570 but they still have all the same size. 101 00:05:06,570 --> 00:05:09,630 So they all try to fill up the available space 102 00:05:09,630 --> 00:05:11,463 and all in the same proportion. 103 00:05:12,300 --> 00:05:16,690 And the same, of course, for just two columns. 104 00:05:16,690 --> 00:05:20,490 But let's put it back to four columns like this. 105 00:05:20,490 --> 00:05:23,910 So let's quickly review what's happening here. 106 00:05:23,910 --> 00:05:25,510 So in this grid container, 107 00:05:25,510 --> 00:05:29,340 there is basically initially all of this empty space here. 108 00:05:29,340 --> 00:05:32,810 So all the way from this side to this side. 109 00:05:32,810 --> 00:05:37,260 And then as we use the fr unit here like this, 110 00:05:37,260 --> 00:05:41,050 then all of that empty space will get divided up equally 111 00:05:41,050 --> 00:05:42,970 between these four columns 112 00:05:42,970 --> 00:05:46,890 and that is because each of them has the same value here. 113 00:05:46,890 --> 00:05:49,100 So each of them is one, 114 00:05:49,100 --> 00:05:50,750 but now let's see what happened 115 00:05:50,750 --> 00:05:54,213 if we changed one of them to two, for example. 116 00:05:55,440 --> 00:05:57,360 So let's see. 117 00:05:57,360 --> 00:05:59,920 And now this one here gets double the space, 118 00:05:59,920 --> 00:06:02,450 than all the other columns. 119 00:06:02,450 --> 00:06:07,220 So now the space basically is divided into five fractions. 120 00:06:07,220 --> 00:06:11,990 So two plus one, plus one, plus one is five fractions. 121 00:06:11,990 --> 00:06:14,540 And so out of these five fractions, 122 00:06:14,540 --> 00:06:17,150 the first column gets two of them 123 00:06:17,150 --> 00:06:20,730 and the remaining ones get each of them each. 124 00:06:20,730 --> 00:06:25,000 And the same is true as we keep increasing the size here. 125 00:06:25,000 --> 00:06:27,470 Let's say, three. 126 00:06:27,470 --> 00:06:31,480 Then this should now have half of the space. 127 00:06:31,480 --> 00:06:35,713 And to see this in reality, let's make this a bit bigger. 128 00:06:37,400 --> 00:06:38,420 Right? 129 00:06:38,420 --> 00:06:40,960 And let's inspect this also, 130 00:06:40,960 --> 00:06:42,623 just so we see that this is true. 131 00:06:43,470 --> 00:06:47,323 So this grid now has a width of 1096, 132 00:06:48,680 --> 00:06:52,453 so let's make it a bit smaller. 133 00:06:55,050 --> 00:06:57,180 So I want to make it a thousand pixels 134 00:06:57,180 --> 00:06:58,780 to make it easier to understand. 135 00:07:00,890 --> 00:07:02,600 And that's close enough. 136 00:07:02,600 --> 00:07:06,350 And so this one here gets approximately 500 pixels, 137 00:07:06,350 --> 00:07:07,730 which is half 138 00:07:07,730 --> 00:07:11,403 and then these other columns here have a lot less. 139 00:07:12,950 --> 00:07:17,320 So that's basically a sixth of the available space. 140 00:07:17,320 --> 00:07:20,470 And I know that this one here is half 141 00:07:20,470 --> 00:07:23,280 because now we have six units. 142 00:07:23,280 --> 00:07:27,650 So three plus one, plus one, plus one is six. 143 00:07:27,650 --> 00:07:31,583 And the first one gets three, which is half, right? 144 00:07:33,690 --> 00:07:37,570 So this is very important stuff and very helpful. 145 00:07:37,570 --> 00:07:39,270 And just like in flexbox, 146 00:07:39,270 --> 00:07:43,700 this allows us to not having to specify width manually. 147 00:07:43,700 --> 00:07:44,533 Okay. 148 00:07:44,533 --> 00:07:48,330 Now going back here to equal-sized columns, 149 00:07:48,330 --> 00:07:50,810 I actually want to show you something else. 150 00:07:50,810 --> 00:07:54,440 So here we can also specify the 'auto' keyword 151 00:07:54,440 --> 00:07:56,603 instead of one of these units. 152 00:07:58,030 --> 00:08:02,200 So if we say 'auto' for example on the fourth column, 153 00:08:02,200 --> 00:08:05,200 then it will only take exactly the size 154 00:08:05,200 --> 00:08:09,060 that is necessary to fill it's content. 155 00:08:09,060 --> 00:08:10,860 And many times in practice, 156 00:08:10,860 --> 00:08:13,030 this is actually exactly what we need 157 00:08:13,030 --> 00:08:15,150 for one of the columns. 158 00:08:15,150 --> 00:08:18,680 So this one here is important to keep in mind. 159 00:08:18,680 --> 00:08:20,280 Okay. 160 00:08:20,280 --> 00:08:23,100 But let's once again turn this off 161 00:08:23,100 --> 00:08:26,823 because now I want to even show you something else again. 162 00:08:27,890 --> 00:08:32,890 So let's write 'grid-template-columns' again, 163 00:08:32,940 --> 00:08:35,400 because there is actually an easier way 164 00:08:35,400 --> 00:08:39,870 of writing a four times fr like we did here. 165 00:08:39,870 --> 00:08:43,950 So instead, CSS Grid introduced a repeat function 166 00:08:43,950 --> 00:08:48,950 where we can simply write 'repeat' then open parenthesis, 167 00:08:50,050 --> 00:08:52,840 and then write how many columns you want 168 00:08:52,840 --> 00:08:54,703 and how large they should be. 169 00:08:55,630 --> 00:08:59,770 So let's say '1fr' and there we go. 170 00:08:59,770 --> 00:09:04,693 So this is equivalent to just writing '1fr' four times. 171 00:09:05,560 --> 00:09:07,500 And so one more time, 172 00:09:07,500 --> 00:09:10,643 CSS Grid is making our life a lot easier. 173 00:09:12,300 --> 00:09:14,020 Let's remove this here. 174 00:09:14,020 --> 00:09:17,401 And of course, this could just be '3' 175 00:09:17,401 --> 00:09:20,350 and then we would get another row here. 176 00:09:20,350 --> 00:09:23,970 And this row by the way, is called an implicit row 177 00:09:23,970 --> 00:09:27,360 while these two here are called explicit rows. 178 00:09:27,360 --> 00:09:30,000 And that's because these first two rows, 179 00:09:30,000 --> 00:09:34,620 we actually did specify some sizes for them, right? 180 00:09:34,620 --> 00:09:38,300 And so we explicitly defined these two rows 181 00:09:38,300 --> 00:09:40,940 while this third one here was basically 182 00:09:40,940 --> 00:09:42,760 just added automatically 183 00:09:42,760 --> 00:09:46,520 because we run out of space in the grid that we defined. 184 00:09:46,520 --> 00:09:49,580 And so this row here that was added automatically 185 00:09:49,580 --> 00:09:51,940 is called an implicit row. 186 00:09:51,940 --> 00:09:55,900 And in fact, we do have a way of styling implicit rows, 187 00:09:55,900 --> 00:09:59,120 but that is outside the scope of this course. 188 00:09:59,120 --> 00:10:02,580 So usually, we just always define an explicit grid 189 00:10:02,580 --> 00:10:06,113 like we did here, so by using these two properties. 190 00:10:07,170 --> 00:10:08,873 So let's set it back to '4' 191 00:10:10,000 --> 00:10:12,850 and now let's move on quickly to rows 192 00:10:12,850 --> 00:10:17,673 because the fr unit is actually also available on rows. 193 00:10:19,000 --> 00:10:20,930 So let's try that. 194 00:10:20,930 --> 00:10:22,420 And in order to do this, 195 00:10:22,420 --> 00:10:25,710 we actually first need to give the container a height 196 00:10:26,590 --> 00:10:29,963 because otherwise there is not really anything to fill, 197 00:10:30,920 --> 00:10:32,040 right? 198 00:10:32,040 --> 00:10:33,970 So let me show that to you. 199 00:10:33,970 --> 00:10:36,260 And I will move that up here again, 200 00:10:36,260 --> 00:10:40,093 with the option or alt up key. 201 00:10:41,150 --> 00:10:42,230 Let's put that here 202 00:10:45,534 --> 00:10:48,800 and 'grid-template-rows'. 203 00:10:48,800 --> 00:10:52,020 And so as I was saying, if we just do this, 204 00:10:52,020 --> 00:10:54,580 because then there's no space to fill, 205 00:10:54,580 --> 00:10:57,510 but actually there is some space. 206 00:10:57,510 --> 00:11:00,810 So these rows are quite tall, 207 00:11:00,810 --> 00:11:03,770 but let me explain to you why that is happening. 208 00:11:03,770 --> 00:11:06,900 So just like before we have this one element, 209 00:11:06,900 --> 00:11:09,810 which is 150 pixels tall. 210 00:11:09,810 --> 00:11:10,780 Right? 211 00:11:10,780 --> 00:11:11,720 And so therefore, 212 00:11:11,720 --> 00:11:16,630 this entire row here will then be 150 pixels tall as well. 213 00:11:16,630 --> 00:11:18,737 And so therefore, that is then '1fr'. 214 00:11:20,750 --> 00:11:22,190 All right. 215 00:11:22,190 --> 00:11:25,100 So again, the height of this track, 216 00:11:25,100 --> 00:11:29,200 this row track here is defined by its tallest element, 217 00:11:29,200 --> 00:11:32,730 which is this one here with 150 pixels. 218 00:11:32,730 --> 00:11:37,500 And so therefore then the entire height of this row is '1fr' 219 00:11:37,500 --> 00:11:39,050 as we defined it here. 220 00:11:39,050 --> 00:11:42,930 And so then the second track gets the exact same height, 221 00:11:42,930 --> 00:11:47,130 because, well, that has also '1fr'. 222 00:11:47,130 --> 00:11:51,090 But let's then now actually remove this here. 223 00:11:51,090 --> 00:11:54,573 And so this was the result I was expecting in the beginning. 224 00:11:55,700 --> 00:11:56,970 Okay. 225 00:11:56,970 --> 00:11:59,800 So now these are still the same size 226 00:11:59,800 --> 00:12:01,300 because there are still '1fr'. 227 00:12:02,150 --> 00:12:04,870 But the size is now defined by this row 228 00:12:04,870 --> 00:12:07,110 because this here is the height 229 00:12:07,110 --> 00:12:10,113 that is necessary to create this row. 230 00:12:11,080 --> 00:12:12,290 But now, as I was saying, 231 00:12:12,290 --> 00:12:16,760 let's actually define a height for this container. 232 00:12:16,760 --> 00:12:19,403 So if we say like 600 pixels, 233 00:12:20,320 --> 00:12:22,983 then you see that it looks very different. 234 00:12:23,840 --> 00:12:26,160 Let's make it a bit smaller. 235 00:12:26,160 --> 00:12:27,870 And yeah. 236 00:12:27,870 --> 00:12:31,270 So by creating a height for this container, 237 00:12:31,270 --> 00:12:33,390 we added a lot of empty space, 238 00:12:33,390 --> 00:12:38,230 which could now be filled by these two fractional units. 239 00:12:38,230 --> 00:12:39,310 Right. 240 00:12:39,310 --> 00:12:40,580 And just like before, 241 00:12:40,580 --> 00:12:43,260 we could of course make this one taller, 242 00:12:43,260 --> 00:12:47,580 like double as tall by giving it double the fractions. 243 00:12:47,580 --> 00:12:50,720 Okay, let's put it back. 244 00:12:50,720 --> 00:12:55,720 And usually the fr unit is actually more helpful on columns. 245 00:12:56,930 --> 00:12:57,920 Okay. 246 00:12:57,920 --> 00:13:00,480 So in fact, in many situations, 247 00:13:00,480 --> 00:13:03,910 it's actually enough to only define columns 248 00:13:03,910 --> 00:13:07,560 and let the rows be filled automatically. 249 00:13:07,560 --> 00:13:10,180 Now just one final thing is that of course, 250 00:13:10,180 --> 00:13:13,563 the 'auto' keyword is also available for rows. 251 00:13:14,450 --> 00:13:16,740 So now this only takes the space it needs 252 00:13:16,740 --> 00:13:20,360 and all the remaining space is automatically filled up 253 00:13:20,360 --> 00:13:21,880 by this one here. 254 00:13:21,880 --> 00:13:23,800 So by just first row track, 255 00:13:23,800 --> 00:13:26,380 which has the fractional unit. 256 00:13:26,380 --> 00:13:27,600 All right. 257 00:13:27,600 --> 00:13:30,660 And with this, you actually already learned many 258 00:13:30,660 --> 00:13:35,050 of the most important fundamentals of CSS Grid. 259 00:13:35,050 --> 00:13:38,870 So with this, we can already create some pretty useful grids 260 00:13:38,870 --> 00:13:40,620 in the real world. 261 00:13:40,620 --> 00:13:43,740 However, let's actually take it one step further 262 00:13:43,740 --> 00:13:48,470 in the next lecture and learn how to actually manually place 263 00:13:48,470 --> 00:13:52,393 and span grid items inside of our grid container. 19020

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.