Having trouble expanding grid template row vertically with CSS grid - html

Question

I currently have this navigation bar in 1280 pixel resolution as follows:
To make it responsive, I want to have the title at the bottom of the logo image when it reaches 1080 pixels. Below is the sample I want it to have it exactly:
I have been using CSS Grid to divided the columns and rows. I am using media queries to have my website responsive, but for some reason nothing works when I try to increase the size of the grid-template-rows elements in CSS.
So far, this is what I got:
I can only assume that the title is hiding behind the image since the row is not large enough to fit below it. I'm not exactly sure how to fix my code.
HTML
#media only screen and (max-width: 1280px) {
.main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.2fr;
grid-template-rows: 0.2fr 0.4fr 0.2fr 0.70fr 0.45fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images contents";
grid-gap: 0.2rem;
}
#navbar {
display: inline-block;
grid-area: nav;
background: orange;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 20px;
top: -13px;
position: absolute;
}
h3 {
margin-left: 120px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 10px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
font-weight: bold;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
font-weight: bold;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
#icons {
grid-area: icons;
background: lightblue;
display: flex;
align-items: center;
justify-content: center;
}
#icons img {
padding: 30px;
}
#images {
grid-area: images;
background: orange;
}
#images_heading {
margin-left: 20px;
}
#images img {
margin-left: 30px;
padding: 15px;
}
#contents {
grid-area: contents;
background: brown;
}
#contents_first img {
float:left;
}
#contents_first h5 {
font-size: 15px;
}
/*#contents_first {
display: flex;
margin-left: 10px;
}*/
/*#contents_first h5 {
float: right;
margin-left: 20px;
}/*
/*#contents_first h5 {
margin-top: 3px;
margin-left: 10px;
font-size: 15px;
}*/
#contents_second img {
float:left;
}
#contents_second h5 {
font-size: 15px;
}
#contents_third img {
float: left;
}
#contents_third h5 {
font-size: 15px;
}
#contents_fourth img {
float: left;
}
#contents_fourth #name {
font-size: 17px;
}
footer {
text-align: right;
}
}
#media only screen and (max-width: 1080px)
{
.main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.2fr;
grid-template-rows: 0.2fr 0.4fr 0.2fr 0.70fr 0.45fr 0.1fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images images"
"contents contents contents contents";
grid-gap: 0.2rem;
}
#navbar {
display: inline-block;
grid-area: nav;
background: ;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 500px;
top: -13px;
position: absolute;
}
h3 {
margin-left: 450px;
margin-bottom: -900px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 10px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
font-weight: bold;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
font-weight: bold;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
#icons {
grid-area: icons;
background: lightblue;
display: flex;
align-items: center;
justify-content: center;
}
#icons img {
padding: 30px;
}
#images {
grid-area: images;
background: orange;
}
#images_heading {
margin-left: 20px;
}
#images img {
margin-left: 30px;
padding: 15px;
}
#contents {
grid-area: contents;
background: brown;
}
#contents_first img {
float:left;
}
#contents_first h5 {
font-size: 15px;
}
/*#contents_first {
display: flex;
margin-left: 10px;
}*/
/*#contents_first h5 {
float: right;
margin-left: 20px;
}/*
/*#contents_first h5 {
margin-top: 3px;
margin-left: 10px;
font-size: 15px;
}*/
#contents_second img {
float:left;
}
#contents_second h5 {
font-size: 15px;
}
#contents_third img {
float: left;
}
#contents_third h5 {
font-size: 15px;
}
#contents_fourth img {
float: left;
}
#contents_fourth #name {
font-size: 17px;
}
footer {
text-align: right;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive J Web</title>
<link rel="stylesheet" href="Lab04.css">
</head>
<body>
<div class = "main">
<section id = "navbar">
<img src="lens.jpg" alt=lens width=90px height=90px>
<header>
<h3>
Art of Photography
</h3>
</header>
<ul>
<li><div class="navbar_left">Photography</div></li>
<li><div class="navbar_left">History</div></li>
<li><div class="navbar_right">Samples</div></li>
<li><div class="navbar_right">About</div></li>
</ul>
</section>
<section id = "main-heading">SELF-PORTRAIT & STREET PHOTOGRAPHY
</section>
<div id = "sub-heading">FROM VANCOUVER, BC</div>
<div id = "icons">
<img src="first_circle.png" alt="first_circle" width=70px height=70px>
<img src="second_circle.png" alt="second_circle" width=70px height=70px>
<img src="third_circle.png" alt="third_circle" width=70px height=70px>
<img src="fourth_circle.png" alt="fourth_circle" width=70px height=70px>
</div>
<div id = "images">
<p id = "images_heading">Navigation page</p>
<img src="camera_atmosphere.jpg" alt="camera_atmosphere" width=250px height=140px>
<img src="camera_guy.jpg" alt="camera_guy" width=250px height=140px>
<img src="graph.jpg" alt="graph" width=250px height=140px>
<img src="rolliflex.jpg" alt="graph" width=250px height=140px>
</div>
<div id="contents">
<p id = "contents_heading">
News
</p>
<section id = "contents_first">
<img src="camera_atmosphere.jpg" alt="camera_atmosphere" width=50px height=50px>
<h5>PHOTO CAPTURED IN VANCOUVER, STANLEY PARK.</h5>
</section>
<section id ="contents_second">
<img src="camera_guy.jpg" alt="camera_guy" width=50px height=50px>
<h5>CAMERA GUY WHO ALWAYS LOOK FOR ADVENTURE.</h5>
</section>
<section id = "contents_third">
<img src="first_circle.png" alt="first_circle" width=50px height=50px>
<h5>CIRCLE CAPTURED IN SOMEWHERE IN THE WORLD.</h5>
</section>
<br/>
<section id = "contents_fourth">
<img src="mail_icon.jpg" alt="mail_icon" width= 20px height=20px>
<p id="name">J<span style="font-weight:bold">A</span></p>
<p id="name_info">Please reach out to J A for more information.</p>
<footer>© J A</footer>
</section>
</div>
</div>
</body>

Answer 1

instead of using '1fr' use 'auto'
you can do this
grid-template: auto 1fr auto/ auto 1fr auto;