1 00:00:00,640 --> 00:00:05,170 Our site uses Flexbox to layout the card components 2 00:00:05,170 --> 00:00:07,980 displaying the different VR topic areas. 3 00:00:07,980 --> 00:00:14,230 Now over in the card partial, you can see that in the small breakpoint, 4 00:00:14,230 --> 00:00:18,660 a flex value of 1 is applied to each card to place them side by side. 5 00:00:18,660 --> 00:00:21,990 Now, you can learn all about Flexbox by taking our Flexbox course. 6 00:00:21,990 --> 00:00:24,350 I posted a link to the course in teachers note. 7 00:00:24,350 --> 00:00:28,750 So currently, the cards are flexible but 8 00:00:28,750 --> 00:00:32,810 they do not always appear as equal with items. 9 00:00:32,810 --> 00:00:37,200 And notice how they don't line up perfectly across multiple rows or 10 00:00:37,200 --> 00:00:37,750 flex lines. 11 00:00:38,960 --> 00:00:43,540 Now, I could manually calculate a flex spaces value to force 12 00:00:43,540 --> 00:00:46,630 equal with cards that line up perfectly. 13 00:00:46,630 --> 00:00:50,440 And flex is a short hand property, so if you give the property a second 14 00:00:50,440 --> 00:00:53,500 length value it will apply it as the flex basis value. 15 00:00:53,500 --> 00:01:00,159 So for example, to force two equal with items per line add a second value of 50%. 16 00:01:07,423 --> 00:01:13,930 And now let's margins or gutters to create visual space around each card. 17 00:01:13,930 --> 00:01:19,100 So first in the variables partial, I will define the variable 18 00:01:19,100 --> 00:01:25,830 gutter here under layout and set it to 10 pixels. 19 00:01:25,830 --> 00:01:27,300 I'll give this a save. 20 00:01:27,300 --> 00:01:32,780 And over in the cards partial, we'll set the margin value of card to gutter. 21 00:01:39,021 --> 00:01:43,860 And as you can see, this breaks the two column layout because the browser 22 00:01:43,860 --> 00:01:48,630 does not include margin values in its flex spaces calculations. 23 00:01:48,630 --> 00:01:54,120 It doesn't account for any margins in a flex lines available space. 24 00:01:54,120 --> 00:02:00,560 Now, I could manually subtract each lines total margin value from the flex basis for 25 00:02:00,560 --> 00:02:05,530 example a smaller value like 45% will do the trick. 26 00:02:12,104 --> 00:02:18,090 So now we have equally sized and spaced items that line up across multiple lines. 27 00:02:19,420 --> 00:02:23,810 So now, if we wanted to force three equal with items per line in a large break 28 00:02:23,810 --> 00:02:28,590 point, we need to manually figure out another flex basis value to achieve this. 29 00:02:28,590 --> 00:02:30,420 So Sass can do this work for us. 30 00:02:30,420 --> 00:02:33,300 We just need to create a function to do the calculations. 31 00:02:33,300 --> 00:02:36,380 The function will subtract the total gutter value 32 00:02:36,380 --> 00:02:39,760 of each line based on the number of items per line. 33 00:02:39,760 --> 00:02:44,090 So it's gonna return a percentage value we'll use as the flex basis. 34 00:02:44,090 --> 00:02:47,760 In the function, we'll give us total control over the wrapping of cards 35 00:02:47,760 --> 00:02:51,930 displaying perfectly lined up columns right at the given break point. 36 00:02:51,930 --> 00:02:57,710 Over in the functions partial, let's first delete the test rule. 37 00:02:57,710 --> 00:03:02,408 And we'll create a new function called per-line. 38 00:03:04,679 --> 00:03:08,309 And the function will accept the parameter items, or 39 00:03:08,309 --> 00:03:11,060 the number of items to display per line. 40 00:03:12,650 --> 00:03:13,320 Let's add return. 41 00:03:16,212 --> 00:03:21,250 First, we'll convert the gutter value to a flexible percentage value. 42 00:03:21,250 --> 00:03:27,280 So, let's store the value in the variable g_pct or gutter percentage. 43 00:03:28,470 --> 00:03:31,480 Now you can call functions within other functions. 44 00:03:31,480 --> 00:03:36,710 So, we'll use our handy pics to pc function to divide gutter 45 00:03:36,710 --> 00:03:37,790 by the max width. 46 00:03:37,790 --> 00:03:39,150 As the value for this variable, 47 00:03:39,150 --> 00:03:44,290 we'll type pics to pc, passing in the gutter variable. 48 00:03:45,620 --> 00:03:49,090 Then, we'll multiply the result by two 49 00:03:49,090 --> 00:03:53,310 to get the combined value of both the left and right side gutters. 50 00:03:53,310 --> 00:03:57,130 Next, let's declare the variable g dash total 51 00:03:57,130 --> 00:04:02,150 to get the total gutter value of each row or flex line. 52 00:04:02,150 --> 00:04:03,200 To get the value, 53 00:04:03,200 --> 00:04:08,710 we'll multiply the gutter percentage value by the number of items per line. 54 00:04:08,710 --> 00:04:15,220 So we'll say, items times the variable that are percentage. 55 00:04:16,250 --> 00:04:21,281 Finally to return the value to use as the flex basis, we divide 56 00:04:21,281 --> 00:04:26,630 100%for the total available width by the number of items per line. 57 00:04:29,150 --> 00:04:36,270 Then we'll subtract the total gutter value by saying minus the variable g total. 58 00:04:39,180 --> 00:04:43,200 Notice how we declared two variables, gutter percentage and 59 00:04:43,200 --> 00:04:45,800 gutter total within the function. 60 00:04:45,800 --> 00:04:49,060 Now because we declared the variables inside the function, 61 00:04:49,060 --> 00:04:51,430 they're known as local variables. 62 00:04:51,430 --> 00:04:54,410 A local variable only lives within its function, so 63 00:04:54,410 --> 00:04:56,460 it can't be used outside the function. 64 00:04:56,460 --> 00:05:00,250 Local variables also can't be changed or overridden by other rules. 65 00:05:00,250 --> 00:05:02,330 So now let's test our function. 66 00:05:02,330 --> 00:05:05,210 We'll go back to the card partial. 67 00:05:05,210 --> 00:05:11,640 And at the small break point I want to force two equal with items per line. 68 00:05:11,640 --> 00:05:17,570 So I'll set the second value of the flex property to our per line function, 69 00:05:17,570 --> 00:05:19,910 passing in two as the argument. 70 00:05:20,960 --> 00:05:25,320 So now at the large breakpoint, I want to force three items per line. 71 00:05:25,320 --> 00:05:30,210 Inside the card rule, I'll create a media query using 72 00:05:30,210 --> 00:05:35,100 the expression min-width break l for the large break point. 73 00:05:40,750 --> 00:05:42,800 Then add a flex basis property. 74 00:05:44,410 --> 00:05:50,350 And set the value to our per-line function passing in three items per line. 75 00:05:51,690 --> 00:05:52,930 All right, let's give this a save. 76 00:05:52,930 --> 00:05:56,270 And open up the output CSS. 77 00:05:56,270 --> 00:06:01,071 And here you can see that passing the function, the argument to, 78 00:06:01,071 --> 00:06:06,756 returns the value 46% and passing at three returns 27.33333%. 79 00:06:06,756 --> 00:06:07,910 All right, perfect. 80 00:06:07,910 --> 00:06:09,880 So, let's have a look in the browser. 81 00:06:09,880 --> 00:06:10,380 Refresh. 82 00:06:13,804 --> 00:06:18,318 And it works using the function gives us total control over the number of items 83 00:06:18,318 --> 00:06:23,130 being displayed on one line and the line up perfectly across multiple flex lines.