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

Thomas Moore
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Moore
Front End Web Development Techdegree Graduate 25,371 Points
Posted by Thomas Moore
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Moore
Front End Web Development Techdegree Graduate 25,371 Points

Usefulness of CSS Grid Col layout

Hi there,

I've just finished the Modular CSS with Sass course and I had a question about the grid-column layout used.

Basically, my question is: given we now have flexbox and CSS Grid, is this pattern actually used? If so what for?

The only thing I can imagine is setting the widths of a container (i.e. 50% the width of the screen) but can't we just set widths manually and media queries?

Thanks in advance for the advice!

PS: To try and illustrate what I mean, I'm talking about this pattern (which are then applied to HTML elements):

@media (min-width: 769px) {
  .grid__col--1 {
    width: 6.5%; }
  .grid__col--2 {
    width: 15%; }
  .grid__col--3 {
    width: 23.5%; }
  .grid__col--4 {
    width: 32%; }
  .grid__col--5 {
    width: 40.5%; }
  .grid__col--6 {
    width: 49%; }
  .grid__col--7 {
    width: 57.5%; }
  .grid__col--8 {
    width: 66%; }
  .grid__col--9 {
    width: 74.5%; }
  .grid__col--10 {
    width: 83%; }
  .grid__col--11 {
    width: 91.5%; }
  .grid__col--12 {
    width: 100%; } 
}

2 Answers

David Moorhead
David Moorhead
18,005 Points
David Moorhead
David Moorhead
18,005 Points

Hi, Thomas,

I understand your curiosities! I've become a champion of CSS Grid, and I've experimented for months with it in my private projects by not using pixels nor media queries nor 12-columns, for instance. The code you've shown above is waaaay too much :smile: in my biased way of thinking after hours of experiments and training.

Have you, on your own, begun designing a page using CSS Grid with Flexbox snippets? If not, I recommend you do. You might be one of those designers who's been inspired to work with CSS Grid for discovering what it can't do.

Here's a Team Treehouse conversation: Designing for CSS Grid.

Expanding your ideas beyond the curiosities mentioned in your post and your code, this video might help: Introduction to Viewport Units by Jen Simmons. What I'm about to say may not be right for you, yet it might be for another reader: In my opinion, each idea, perhaps, every word she speaks is worth gold, that is, if you're presently a serious visual web designer.

Jen presents on behalf of Mozilla, and her background includes art and graphic design. Here's her Youtube channel. This video might be helpful, too: 9 Biggest Mistakes with CSS Grid.

Other references.

The Great Divide, an article explaining the divide between people who self-identify as a (or have the job title of) front-end developer, yet have divergent skill sets. CSS-Tricks; author, Chris Coyier | January, 2019.

CSS Grid for Designers, an article about a new technology that's changing layout on the web. Open New York Times; author, Johna Paolino | January 3, 2019.

Happy Coding :smile:

David

Thomas Moore
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Moore
Front End Web Development Techdegree Graduate 25,371 Points
Thomas Moore
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Moore
Front End Web Development Techdegree Graduate 25,371 Points

Wow, thanks for the amazing answer David. Super helpful. I've taken a look at those videos + articles.

The NYT post was especially helpful (and I've subscribed to Layout Land on YouTube, can't believe I haven't come across that before).

Definitely feels like the movement is towards using Grid (and Flexbox) as a starting point. Then having the 12-column grid in the back pocket in case it's needed... although still can't think of many uses that Grid and Flexbox can't accommodate.

Glad to know I'm not going mad!

Julianna Kahn
Julianna Kahn
20,702 Points
Julianna Kahn
Julianna Kahn
20,702 Points

I just want to be sure I understand. Are you saying CSS Grid can in fact be used with sass?

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points

I like the css grid for bento-box kinds of things (rectanges of different sizes, take up spaces across rows). I like the column grid layout (as in the video) for responsive designs. Easy to tell my elements to take up x columns for desktop, x columns for tablet, and everything in one column for mobile. Going through this tutorial was interesting but I much prefer to use the 12 column grid in Bootstrap where it's already built. I use flexbox for something with only one dimension, like elements in a row or elements in a column. If there's a 2 dimensional layout - rows and columns - and I need to repackage these elements in a different way depending on screen size, I think the Bootstrap style grid is the way to go.