css - Grid Responsive image and take the full row height?

Question

I am making an image grid with where i want the images to take the full grid height and be responsive. But if i don't give grid a row height then images become responsive and if i give a fixed height they are not responsive anymore. Tried in so many way but couldn't get the result. How can i achieve both?

The project is here (https://codepen.io/faysal-ahmed-akash/pen/WNGLvev)

Here is the HTML

<section id="work">
    <h1 id="work-header">These are some of my Projects</h1>
    <div id="project-grid">
        <a href="#">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="Tribute Page" id="project-img" />
            <p id="project-title">
                Tribute Page
            </p>
        </a>
        <a href="#">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="Tribute Page" id="project-img" />
            <p id="project-title">
                Tribute Page
            </p>
        </a>
        <a href="#">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="Tribute Page" id="project-img" />
            <p id="project-title">
                Tribute Page
            </p>
        </a>
        <a href="#">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="Tribute Page" id="project-img" />
            <p id="project-title">
                Tribute Page
            </p>
        </a>
        <a href="#">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="Tribute Page" id="project-img" />
            <p id="project-title">
                Tribute Page
            </p>
        </a>
        <a href="#">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="Tribute Page" id="project-img" />
            <p id="project-title">
                Tribute Page
            </p>
        </a>
    </div>
</section>

Here is the CSS

:root {
    --main-white: #f0f0f0;
    --main-red: #be3144;
    --main-blue: #45567d;
    --main-gray: #303841;
    --main-black: black;
}

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: "Poppins", sans-serif;
    line-height: 1.4;
}

a {
    text-decoration: none;
}

#work {
    padding: 5vh 0 5vh 0;
    background-color: var(--main-blue);
}

#work-header {
    color: var(--main-white);
    border-bottom: 2px solid var(--main-white);
    text-align: center;
    display: table;
    margin: 0 auto 6vh auto;
    font-size: 3vmax;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
}

#project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    grid-template-rows: 450px 450px;
    grid-gap: 4rem;
    width: 95%;
    margin: 0 auto;
}

#project-img {
    display: block;
    height: 100%;
    max-width: 100%;
}

#project-title {
    background-color: #303841;
    color: var(--main-white);
    text-align: center;
    font-size: 1.7rem;
}

question from:https://stackoverflow.com/questions/65829626/grid-responsive-image-and-take-the-full-row-height

Answer 1

Waitting for answers