Can React props be used in CSS?

I have a display: grid;, set to the body of my react-app.
I have a component that uses a part of the grid that I want to repeat itself two more times side by side.
How do I used props for the CSS property, grid-area: , so I can change the position of other two within the grid, slightly modifying the reusable component?

I tried using props the usual way but this only affects the html and am confused on how to change a css property for a reusable component.

Here is the code:

function App() {

  return (
    <>
      <Nav />
      <Sidebar />
      <Main />
      <Content h1="Content1"/>
      
      <Footer/>
    </>
  )
}

export default App

import './Content.css'

function Content(props) {
    return (
        <div className="content">
            <h1>{props.h1}</h1>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                Nemo laborum sapiente placeat dolorem a quae!
            </p>
        </div>
    );
}
export default Content

.content {
    grid-area: content1;
}
.content h1 {
    padding: 1rem;
    background: orange;
    color: white;
    font-weight: 700;
    border-radius: 0.25rem 0.25rem 0 0;
}
.content p {
    padding: 1rem;
    line-height: 1.6;
}

The layout is working as expected,
I just want to change the CSS property grid-area: to a newer position.
Do you know the syntax for modifying a specific CSS property when styling with react props?