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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Dexter Wang
Dexter Wang
3,491 Points

Is a grid system the logical next step?

After learning this would using a responsive grid system to setup 3 columns be ideal? In each list item, you could have them span 1/3 of the page. Does this make sense for a portfolio layout or just static layouts?

Konrad Pilch
Konrad Pilch
2,435 Points

What do you mean?

Dexter Wang
Dexter Wang
3,491 Points

Using grid layouts seem straightforward without dealing with floats. So I was wondering if building this same portfolio layout with a grid system makes sense?

The other thing is I've used grids on static pages before, but I was concerned that portfolio pages may be handled differently since they may be dynamically updated.

2 Answers

Konrad Pilch
Konrad Pilch
2,435 Points

Well, yes, grid systems are straight forward. You don't even need to have one if you know how to make a column, or use a CSS properly to calculate it for you.

HTML is static. You can make it dyanmic with back-end the way you set it to behave.

Grid system deffinitelly speed up the works, and saves a lot of work.

You might still want to use floats somethimes i beleive, depending on what you are doing.

Its goo to know pure CSS before going to a CSS framework.

Basically, if you look at a codepen i made, i didn't even use a grid system, but it acts like one. codepen

If you get me, and if thas what you wanted to hear .

Dexter Wang
Dexter Wang
3,491 Points

Great answer. Thanks for the example!

Konrad Pilch
Konrad Pilch
2,435 Points

Ah and of course, if you use a CSS framewokr like bootstrap, then there are more to it, offered best practices and so on.. alll the browser prefixes and that.

I would start off as pure CSS, then e.g. bootstrap or foundation, and then i woudl stop using them.

You will learn hell a lot about CSS and a good HTML structure.

Look at other people professional websites and study thier code.

Bob McCarty
PLUS
Bob McCarty
Courses Plus Student 16,618 Points

Dexter, Your concerns make sense for a home grown grid. I suggest bootstrap.js or foundation.js framework to implement a responsive dynamic grid. You will see a great example of this in the WordPress classes.

Bob

Dexter Wang
Dexter Wang
3,491 Points

Got it. I guess it just depends on how custom you want it :)