Streaming live at 10am (PST)

CSS Grid Formatting


#1

Hey guys! I decided to try out the CSS Grid tool to create my design, and everything seemed like it was going great. But I am having an issue adding an element. I would like to make a scrollable div window so that I can add the text content in sort of like this.

Every time I add a div in the middle section it appears to cut into the top “from: sam taylor” area or after making adjustments it comes just under the “from: sam taylor” area. The goal is to have it flush against the border like the image above, but I am not sure if I am approaching the CSS Grid System correctly or if I should be using maybe another feature within Webflow. This is the last step I need to finish the framework for my concept. Any help/guidance would be fantastic! :~) Thanks if you read all of this. My read-only link is at the bottom of this post.


Here is my site Read-Only: https://preview.webflow.com/preview/to-humankind?utm_source=to-humankind&preview=68e119354720ee7f464bf18cd8d9c23a


#2

All I did was set a max height so it can’t expand regardless of how much text is inside. I then set the overflow to “auto” you can use “scroll” too.

Here is a gif: https://cl.ly/a29bc44d9ace


#3

Thanks so much Noah! It looks pretty cool in your GIF. By any chance do you have any advice on how to make a filled background div that would cover the inner box like in the screenshot I attached?


#4

You can set a background color to the inner div that you are going to put the text in.


#5

You’re very welcome! And exactly what @gilson mentioned. :wink:


#6

By any chance did you move the text block or anything when you changed the size of it so that it could be scrollable? I am trying to get the text more center vertically, but on my screen it looks like this.

There appears to be a large gap. Also thanks @gilson!! I managed to add a tint behind the text content. I’m not sure if this is because the CSS grids change based on the window size. For context, I am working from a MacBook Pro. I wasn’t sure if yours might just look different because you might be using a desktop. I am probably just overlooking something again.


#7

Yes I did move the text block up. I also set to the flex to align: top.