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 CSS Layout Techniques Grid Layout Testing our Grid

Aaron Coursolle
Aaron Coursolle
18,014 Points
Posted by Aaron Coursolle
Aaron Coursolle
18,014 Points

Can a grid system be made less dependent on HTML?

In the grid lessons, the dimensions of each column is made in the HTML, even though the underlying grid is CSS based. Is there a way to have a fluid grid layout system, using only CSS? (Grid, not flexbox.)

2 Answers

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

You can using Sass. This course has a stage which shows you how to build a Sass grid system:

http://teamtreehouse.com/library/modular-css-with-sass

David Bilson
David Bilson
13,819 Points
David Bilson
David Bilson
13,819 Points

Maybe you could use a technique similar to the one used with purecss.io grid system.

http://purecss.io/grids/

where you add a key to each media query and multiple classes to your html div.

Here is an online slideshow explaining purecss.io :

https://speakerdeck.com/tilomitra/building-beautiful-web-apps-using-pure-css