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 Modular CSS with Sass Sass Grid System Column Layout

Max Weir
Max Weir
14,963 Points
Posted by Max Weir
Max Weir
14,963 Points

regarding css output

in the video at 7:15 you review the output grid css but in the video you are looking at the button class output not the grid, am I seeing this wrong?

Andrew Stelmach
Andrew Stelmach
12,583 Points

Well, the 'grid' refers to what you see in your browser when everything is loaded up. In the video in the part you mentioned, you're looking at various css (or scss) files. You can have several of these for one page no problem. The browser effectively merges them all together. In the video at 7.15 you're looking at a 'media query' section of the css.

Not sure precisely what you're after but I hope that helps a little.

Matteo Mainardi
Matteo Mainardi
7,372 Points
Matteo Mainardi
Matteo Mainardi
7,372 Points

I see the same thing: we check the css output for a btn-- class, not for grid__col--. it seems an error to me.

1 Answer

Nikita Golubov
Nikita Golubov
6,191 Points
Nikita Golubov
Nikita Golubov
6,191 Points

Yes, that was a wrong section of output CSS file. You can see a proper output in a workspace of the next lesson.

Here is an excerpt:

@media (min-width: 1px) and (max-width: 768px) {
  [class^="grid__col--"] {
    margin-top: 0.75em;
    margin-bottom: 0.75em; } }
@media (min-width: 769px) {
  [class^="grid__col--"] {
    float: left;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px; }
    [class^="grid__col--"] + [class^="grid__col--"] {
      margin-left: 2%; }
    [class^="grid__col--"]:last-of-type {
      float: right; } }