Background Color in 1fr of Grid

I am trying to change the background color in a Grid but I only see the ability to change the color of the whole grid instead of setting different frames to different colors. I know this has to one possible but I just can’t seem to find it.
I would like half the Section-7 area to be a grey color and the other half white. I found this page Grid areas - Webflow University Documentation but doesn’t mention changing BG-color of single frame.
It also says this:

Name areas
You can name grid template areas so that you can easily identify them in a grid and reuse them elsewhere in your project. It’s especially helpful to use names that specify the function of the area (eg. footer) or the type of content it should contain (eg. main image).
You can name an area on the canvas by clicking the area label while you’re editing the grid or in the grid settings in the Style panel.

I do not see this when I hover over the Grid when Editing. I only have two frames in the grid. I tried to use Flexbox but it was to much fussing to get what I wanted. With Grid it worked perfectly.
Thank you.


Here is my site Read-Only-Link: https://preview.webflow.com/preview/johns-beautiful-project-c2638e?utm_medium=preview_link&utm_source=designer&utm_content=johns-beautiful-project-c2638e&preview=e5d6b5809023434bcf41c89e9ccaf684&mode=preview

Hello @java_I_tess,

Is something like this what you want?


If that is the case you need to choose your div-block-7a and give it a width and height of 100% display flex aligned vertically in the middle, that way it spans the whole area marked on the grid, then you can select a background color for that whole area on the same div. I hope this helps.

Hi everyone!
I think I have a similar problem with my grid, but I can’t find the solution.

I would like to set a background color only on one split of the grid - in this case the split “advanced”. How can I do this?

Here is my read only link:
https://preview.webflow.com/preview/carolines-meyer?utm_medium=preview_link&utm_source=designer&utm_content=carolines-meyer&preview=c4beddad913c45328914ba2160c1fada&pageId=61235d691b8ac6502c0092e3&workflow=preview

Thank you very much in advance!
Caroline

Hey @Caroline-Elisa here is a neat solution:

All you have to do is choose the heading, add a combo class to it, and change the background color of that

Hope that solves your issue.