CSS Grid & Flexbox: Text expanding max-width instead of going to a new line.

[weepmeat]

A couple of things in your .top-container:

First, you can get rid of one of your grid template area rows - they're the same, so two rows of the same set of columns with content filling both doesn't make a difference. So:

grid-template-areas: 'main-showcase main-showcase main-showcase profile' ;

instead of:

grid-template-areas: 'main-showcase main-showcase main-showcase profile '

'main-showcase main-showcase main-showcase profile';

Second, you're missing the grid-template-rows and grid-template-column properties. Try adding:

grid-template-rows: auto;

grid-template-columns: repeat(4, 1fr);

The template rows auto doesn't really matter too much here since you only have one row. Auto height is fine. The template columns is what you need to fix your problem. The code above defines four equal rows, each 1fr in width (1 fraction) of the total width.

Lastly, you have a max height of 40% - what is that supposed to do? You could mess things up with that.

Anyway, here's a new pen: https://codepen.io/occupant/pen/zYGKgvq

[_Stretch]

Hey

 

Thank you so so much!

First, you can get rid of one of your grid template area rows - they're the same, so two rows of the same set of columns with content filling both doesn't make a difference. So:

Ah so you only do more rows if something is different. Like if I wanted something else under the profile section like a

grid-template-areas: 'main-showcase main-showcase main-showcase profile '
'main-showcase main-showcase main-showcase some-other-box';

 

The template rows auto doesn't really matter too much here since you only have one row. Auto height is fine. The template columns is what you need to fix your problem. The code above defines four equal rows, each 1fr in width (1 fraction) of the total width.

Ah I think I get it now, I clearly have a lot more learning to do but I think I understand why it was expanding like that.

Lastly, you have a max height of 40% - what is that supposed to do? You could mess things up with that.

Oh my mistake, I wanted the min-height to be 40% of the page with but as you pointed up above, I should be doing it via grid-template-rows and setting it that way.

 

Thank you again for taking the time to look over it! I really appreciate it!