2 questions:
.navbar is a 4 column grid nested within a parent grid. When I rotate the text in .navbar -90deg each text element spills out of the column to which it was assigned. How do i fix this?
I have two divs named first and LAST. Both divs are assigned to a grid area and they are both overflowing the area as screen size expands. How do i fix this?
here is the html
Why are you rotating the .navbar-item?
Also, working from an image is really not helpful, can you please post the code somewhere like Codepen.
Again images are really not all that helpful.
Anyway, the grid is not aware of the transform. You can try this instead.
writing-mode: tb;
transform: rotate(180deg);
Sorry I dont have a codepen account. I just began working with css/html a few weeks ago and was trying to replicate a responsive design I came across somewhere. If you could offer some general advice on how to constrain elements within the grid areas they are assigned that would be helpful. Im struggling with elements overflowing as screen size increases.
Just make a Codepen account, it’s free. There are other platforms as well, like jsfiddle where you do not need to have an account. Or you can use GitHub to share code. In any case, pictures are not the right way to share code and make it hard (or impossible) to help.
I can’t really give you any general advice, I’d need to see the problem in order to see what specifically is wrong.
If elements have fixed width they may overflow the parent containing element.
You need to allow text to wrap.
If you take an element out of normal document flow (float or positioning) it may collapse the parent or not conform to the parent.
Grid cells (columns/rows) can’t have a fixed width smaller than the content (content can wrap inside to a point).
There is really nothing special about the rules that apply to CSS grid that doesn’t already apply in general when it comes to overflowing containing elements.