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 Build a Simple Website Creating a Website Structure Working with Grids

Vicky Kumar
Vicky Kumar
5,742 Points
Posted by Vicky Kumar
Vicky Kumar
5,742 Points

Confused in use of Grids?

Hello!

Grids can be applied to any website and that's true. But, how to use it? Because, every web page has different dimensions, designs and scenario.

So, it's just a math calculation to put the data according to size of the contents (whether it's images or texts) or anything else?

Does grid apply on Mobile sites? If I create a Mobile site and it's responsive then how to use the Grid? (http://gridulator.com/)

Please ans in simplest way if possible.

Thanks!

1 Answer

Davide Pupparo
Davide Pupparo
8,452 Points
Davide Pupparo
Davide Pupparo
8,452 Points

You should always use a mobile-first approach. That means design the mobile version first and then scale up to desktop size. If you build a fluid grid, using percentages, that will perfectly adapt in any device. If you choose a 12 columns grid, you'll have those columns in any screen resolution. Obviously single columns width will change depending on the screen size. Usually you will need your content to take the total width of the screen in mobile devices, so yo'll use all the columns for your content blocks and they will stack vertically. Then you will adjust for others devices using break points.