Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics Write Smart and Efficient CSS with Sass Create a Function for Flexbox Layout

Richie Black
Richie Black
27,272 Points
Posted by Richie Black
Richie Black
27,272 Points

Math seems wrong, but when correcting doesn't work.

Part of the per-line function given is as follows:

$g-total: $items * $g-pct;
@return ((100% / $items) - $g-total);

$g-total here represents the TOTAL gutter of the whole line, i.e. all $items included. The returned value is then subtracting this total gutter value from the width of a single element rather than the gutter value for said single element (i.e. $g-pct);.
.
Taking the gutter at 10px and and the max-width at 1000, each element should be 313.3333 exact width, or 31.3333% with three items. Yet this doesn't appear to function until higher viewport widths (will ignore the percentage and do columns of 2 with larger widths).
.
Why?

2 Answers

Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

You are probably way past this solution by now, but the question is unsolved, so hopefully this is useful to others. The math seems to work correctly for me.

The first line defines the function and accepts an argument $items for the number of items you want to display per row (based on media queries):

@function per-line($items) {

The next line calls the px-to-pc function to convert argument $gutter (a variable assigned as 10px in the video, in the variables.scss file) to a percentage of the $context parameter, which defaults to the $max-width variable (set to 1000px). This returns the value 1%, but it multiplies by two, to account for the left and right margins, so $g-pct = 2% at this point.

  $g-pct: px-to-pc($gutter) * 2;

Third line multiplies the gutter percentage (per item) you just calculated times the number of items per line you provided as argument to the outer function. So for two items per line: 2 * 2% = 4%

$g-total: $items * $g-pct;

Final line divides 100% width by number of items per line, but subtracts the total gutter percentage (for all items in the row), to result in the percentage used for the flex-basis.

  @return (100% / $items) - $g-total;

steve

Hakim Rachidi
Hakim Rachidi
38,490 Points
Hakim Rachidi
Hakim Rachidi
38,490 Points

You are right

First I faced the same issue but I was skeptical because my solution didn't work as expected, too. But in the end this solution worked:

@function per-line($items) { 
    $item-gt: px-to-pc($gutter) * 2;
    $item-space: (100% / $items) - $item-gt;
    @return $item-space; 
}

Hope this helps;