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

Posted by Marshall Wade
Marshall Wade
1,313 Points

CSS grids, GRRR!

Hi all,

I have made my own page using the grid system that is displayed on the smells like bakin' site.

If I assign a div to grid_1 and put some text inside it, when the text gets too long for the grid it goes down a space. I don't want this!

I want it to then go inside grid_2, just like it appears to automatically in the smells like bakin' site!

thanks.

3 Answers

Vance Rivera
Vance Rivera
18,322 Points
Vance Rivera
Vance Rivera
18,322 Points

You would have to give the div element a css class of grid_2 (or which ever the class name is to expand the div across 2 columns). The css class is a definition, once you assign that css class to a div element(in this case) the element becomes restricted by the properties values of the class. For your issue lets say grid_1 width = 10% this will restrict any div element with a class of grid_1 to a width of 10% of the container element. Any text inside will only expand to the width of the div before breaking to a new line. Hope this helps.

mbukhonko
mbukhonko
3,988 Points
mbukhonko
mbukhonko
3,988 Points

I think OP misunderstands that CSS grids describe maximum width of a block and not its position on the page. As everyone else mentioned, making the block use a bigger grid is the standard solution.

Richard Glover
Richard Glover
10,068 Points
Richard Glover
Richard Glover
10,068 Points

Impossible. you have to resize the grid 1.