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 Creating Fluid Grid Columns with calc()

Posted by mohamedhalabi
mohamedhalabi
1,968 Points

what is the main purpose of using grids ? (other than positioning the items in relative way)

when and why do we use grids ? is there any other better alternatives to using them ?

1 Answer

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi Mohamed,

If I understand your question correctly we use grids to make websites easy to main and rescale to different screen sizes (responsive design). By separating the website content into "blocks" we can move them around in the grid without messing up the structure.

Another reason why we use grids is that users are accustomed to it. Websites are built in a specific way: header and navigation on top, content in the middle and footer in the bottom. This makes it easy to navigate a website you might not be familiar with.

A third and very important reason is that it helps people with a physical impairment (e.g. blindness, missing hands, etc). They can use assisting devices that help them navigate and use the website as it was intended

A fourth reason is that by using a css grid system everything aligns nicely and neatly. It's something designers value greatly.

Hope it helps, Max

mohamedhalabi
mohamedhalabi
1,968 Points

Thank you for the reply ! just wanted to verify that even though grids are used in this vid we can accomplish the same tasks using the float and inline properties :D

Denis Omerović
.a{fill-rule:evenodd;}techdegree
Denis Omerović
Full Stack JavaScript Techdegree Student 2,607 Points

And we can add that everything is CSS so there's no need to download additional files like some frameworks... Also, the markup is much better, cleaner because we don't need unnecessary divs like in bootstrap.