Our site uses Flexbox to layout the card components

displaying the different VR topic areas.

Now over in the card partial, you can see that in the small breakpoint,

a flex value of 1 is applied to each card to place them side by side.

Now, you can learn all about Flexbox by taking our Flexbox course.

I posted a link to the course in teachers note.

So currently, the cards are flexible but

they do not always appear as equal with items.

And notice how they don't line up perfectly across multiple rows or

flex lines.

Now, I could manually calculate a flex spaces value to force

equal with cards that line up perfectly.

And flex is a short hand property, so if you give the property a second

length value it will apply it as the flex basis value.

So for example, to force two equal with items per line add a second value of 50%.

And now let's margins or gutters to create visual space around each card.

So first in the variables partial, I will define the variable

gutter here under layout and set it to 10 pixels.

I'll give this a save.

And over in the cards partial, we'll set the margin value of card to gutter.

And as you can see, this breaks the two column layout because the browser

does not include margin values in its flex spaces calculations.

It doesn't account for any margins in a flex lines available space.

Now, I could manually subtract each lines total margin value from the flex basis for

example a smaller value like 45% will do the trick.

So now we have equally sized and spaced items that line up across multiple lines.

So now, if we wanted to force three equal with items per line in a large break

point, we need to manually figure out another flex basis value to achieve this.

So Sass can do this work for us.

We just need to create a function to do the calculations.

The function will subtract the total gutter value

of each line based on the number of items per line.

So it's gonna return a percentage value we'll use as the flex basis.

In the function, we'll give us total control over the wrapping of cards

displaying perfectly lined up columns right at the given break point.

Over in the functions partial, let's first delete the test rule.

And we'll create a new function called per-line.

And the function will accept the parameter items, or

the number of items to display per line.

Let's add return.

First, we'll convert the gutter value to a flexible percentage value.

So, let's store the value in the variable g_pct or gutter percentage.

Now you can call functions within other functions.

So, we'll use our handy pics to pc function to divide gutter

by the max width.

As the value for this variable,

we'll type pics to pc, passing in the gutter variable.

Then, we'll multiply the result by two

to get the combined value of both the left and right side gutters.

Next, let's declare the variable g dash total

to get the total gutter value of each row or flex line.

To get the value,

we'll multiply the gutter percentage value by the number of items per line.

So we'll say, items times the variable that are percentage.

Finally to return the value to use as the flex basis, we divide

100%for the total available width by the number of items per line.

Then we'll subtract the total gutter value by saying minus the variable g total.

Notice how we declared two variables, gutter percentage and

gutter total within the function.

Now because we declared the variables inside the function,

they're known as local variables.

A local variable only lives within its function, so

it can't be used outside the function.

Local variables also can't be changed or overridden by other rules.

So now let's test our function.

We'll go back to the card partial.

And at the small break point I want to force two equal with items per line.

So I'll set the second value of the flex property to our per line function,

passing in two as the argument.

So now at the large breakpoint, I want to force three items per line.

Inside the card rule, I'll create a media query using

the expression min-width break l for the large break point.

Then add a flex basis property.

And set the value to our per-line function passing in three items per line.

All right, let's give this a save.

And open up the output CSS.

And here you can see that passing the function, the argument to,

returns the value 46% and passing at three returns 27.33333%.

All right, perfect.

So, let's have a look in the browser.

Refresh.

And it works using the function gives us total control over the number of items

being displayed on one line and the line up perfectly across multiple flex lines.