How can I fix this grid in css? - css

Question

I'm trying to do a simple grid for my website. I could almost successfully do what I wanted.
I would like to fix the "Projects" that is the title of this grid, I would like to have it not in the same size as the other parts of the grid.
This is the result that I have:
I would like to have something like this:
HTML:
<div class="project-container">
<div className="title">
<h1>PROJECTS</h1>
</div>
<div className="project-one item">
<h2>Face Recognition</h2>
<button className="button button1">VIEW PROJECT</button>
</div>
<div className="project-two item">
<h2>Face Recognition</h2>
<button className="button button1">VIEW PROJECT</button>
</div>
<div className="project-three item">
<h2>Face Recognition</h2>
<button className="button button1">VIEW PROJECT</button>
</div>
</div>
CSS:
.project-container {
width: 80%;
height: 80vh;
margin: auto;
display: grid;
border: 1px solid pink;
// grid-gap: 4em;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"t t t"
"p1 p2 p3";
}
.item {
// width: 100%;
// height: 100%;
// transition: all 0.2s ease-in-out;
text-align: center;
color: white;
border: 1px solid pink;
}
.title {
grid-area: t;
text-align: center;
border: 1px solid pink;
// height: 10vh;
}

Answer 1

use grid-template-rows
.project-container {
width: 80%;
height: 80vh;
margin: auto;
display: grid;
border: 1px solid pink;
// grid-gap: 4em;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px auto;
grid-template-areas:
"t t t"
"p1 p2 p3";
}

Answer 2

Dude I would recommend using css flexbox. See I have made a code that might help you & it's fully responsive. If you want to create a heavy masonry layout you can go for css grid.
.project_container {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
font: normal 16px/1.9em sans-serif;
}
.wrap {
color: #292929;
font-size: 18px;
line-height: 1.8em;
border: 0;
vertical-align: baseline;
margin: 0;
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.title {
background-color: #a2cbfa;
border: 1px solid #4390e1;
text-align: center;
font-size: 18px;
color: black;
-webkit-text-fill-color: #a2cbfa;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
vertical-align: center;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0, 90, 250, 0.05), 0 4px 4px rgba(0, 90, 250, 0.05),
0 8px 8px rgba(0, 90, 250, 0.05), 0 16px 16px rgba(0, 90, 250, 0.05);
height: 100%;
margin-bottom: 2%;
width: 100%;
}
.item {
color: #292929;
font-size: 18px;
line-height: 1.8em;
vertical-align: baseline;
border-radius: 3px;
background-color: #a2cbfa;
-webkit-text-fill-color: #a2cbfa;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
border: 1px solid #4390e1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0, 90, 250, 0.05), 0 4px 4px rgba(0, 90, 250, 0.05),
0 8px 8px rgba(0, 90, 250, 0.05), 0 16px 16px rgba(0, 90, 250, 0.05);
height: 250px;
margin-bottom: 2%;
text-align: center;
margin-right: 2%;
flex-grow: 1;
}
.project-three {
margin-right: 0px;
}
button {
outline: none;
border: none;
border-radius: 3px;
padding: 5px 10px;
font-weight: light;
-webkit-text-fill-color: #292929;
color: #292929;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: none;
font-size: 12px;
letter-spacing: 1px;
}
<div class="project_container">
<div class="wrap">
<div class="title">
<h1>PROJECTS</h1>
</div>
<div class="project-one item">
<h2>Face Recog</h2>
<button class="button button1">VIEW</button>
</div>
<div class="project-two item">
<h2>Face Recog</h2>
<button class="button button1">VIEW</button>
</div>
<div class="project-three item">
<h2>Face Recog</h2>
<button class="button button1">VIEW</button>
</div>
</div>
</div>
HAPPY CODING
Regards Sameer