How to restrict the row size of a CSS Grid? - html

Question

I have a CSS Grid layout where the top row size increases on decreasing the view port size, which is not what I want.
I don't know what changes I have to make so that the top row size doesn't increase.
/* change border colour to suit your needs */
html{
background-color:azure;
}
.sideNav{
background: #eee;
text-decoration: none;
font-size: 1.25vw;
color:blueviolet;
margin:10px 5px 10px 0px;
margin-top: 200px;
position:absolute;
}
table{
background-color: #eee;
width:100%;
border-spacing:2px;
}
th{
background:azure;
padding:5px;
}
td{
border-bottom: 1px solid white;
padding:5px;
font-size=1vw;
}
/*specific selectors*/
th.No {
text-align:center;
}
td.No {
text-align:center;
}
.heading1{
font-family:sans-serif;
font-size:2vw;
text-align:center;
background-color:blue;
color:white;
border-radius:2px;
}
.heading2{
font-family:sans-serif;
font-size:20px;
text-align:left;
margin-top:10px;
color:black;
border-radius:5px;
}
body{
background-color:white;
}
.container{
display:grid;
grid-template-columns:repeat(6, 1fr);
grid-template-rows:repeat(8, 1fr);
grid-template-areas:
"top top top top top top "
"Lbar main main main main Rbar"
"Lbar main main main main Rbar"
"Lbar main main main main Rbar"
"Lbar main main main main Rbar"
"Lbar main main main main Rbar"
"Lbar main main main main Rbar"
"foot foot foot foot foot foot"
}
.title{
grid-area:top;
}
img{
width:100%;
}
.leftBar{
grid-area: Lbar;
}
ul{
text-decoration: none;
}
.rightBar{
grid-area: Rbar;
}
.contentArea{
grid-area: main;
}
.footerArea{
grid-area: foot;
border:5px;
padding:5px;
height:40%;
text-align:center;
background-color:cornflowerblue;
}
<!-- SlideShow Starts--!>
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: ghostwhite;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- SlideShow Ends--!>
img .title{
position:fixed;
}
/* Left Menu*/
.navigation {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
}
.navigation ul, .navigation ul li, .navigation ul ul {
list-style: none;
margin: 0;
padding: 0;
}
.navigation ul {
z-index: 500;
float: left;
}
.navigation ul li {
float: left;
min-height: 0.05em;
line-height: 1em;
vertical-align: middle;
position: relative;
}
.navigation ul li.hover,
.navigation ul li:hover {
position: relative;
z-index: 510;
cursor: default;
}
.navigation ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 520;
width: 100%;
}
.navigation ul ul li { float: none; }
.navigation ul ul ul {
top: 0;
right: 0;
}
.navigation ul li:hover > ul { visibility: visible; }
.navigation ul ul {
top: 0;
left: 99%;
}
.navigation ul li { float: none; }
.navigation ul ul { margin-top: 0.05em; }
.navigation {
width:100%;
background: #1568ef;
font-family: 'roboto', Tahoma, Arial, sans-serif;
zoom:1;
}
.navigation:before {
content: '';
display: block;
}
.navigation:after {
content: '';
display: table;
clear: both;
}
.navigation a {
display: block;
padding: 1em 1.3em;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
.navigation > ul { width:12em; }
.navigation ul ul { width: auto; }
.navigation > ul > li > a {
border-right: 0.3em solid #34A65F;
color: #ffffff;
}
.navigation > ul > li > a:hover { color: #ffffff; }
.navigation > ul > li a:hover, .navigation > ul > li:hover a { background: #34A65F; }
.navigation li { position: relative; }
.navigation ul li.has-sub > a:after {
content: '»';
position: absolute;
right: 1em;
}
.navigation ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
.navigation ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
.navigation ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.navigation ul ul { border: 1px solid #34A65F; }
.navigation ul ul a { color: #ffffff; }
.navigation ul ul a:hover { color: #ffffff; }
.navigation ul ul li { border-bottom: 1px solid #0F8A5F; }
.navigation ul ul li:hover > a {
background: #4eb1ff;
color: #ffffff;
}
.navigation.align-right > ul > li > a {
border-left: 0.3em solid #34A65F;
border-right: none;
}
.navigation.align-right { float: right; }
.navigation.align-right li { text-align: right; }
.navigation.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
.navigation.align-right ul li.has-sub > a:after { content: none; }
.navigation.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
.navigation.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
.navigation.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
.navigation.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
<!-- counter-->
.main_container {
height: 146px;
width: auto;
padding: 3px;
margin: 2px;
max-width: 300px;
background-color: #555555;
align-content: center;
}
.container_inner {
height: auto;
border: none;
background-color: #555555;
max-width: 290px;
vertical-align: center;
padding-top: 12px;
padding-left: 10px;
align-content: center;
}
.num_tiles {
width:30px;
height: 30px;
background-color: #888888;
color: #ffffff;
font-size: 22px;
text-align: center;
line-height: 20px;
padding: 3px;
margin: 1.5px;
font-family: verdana;
vertical-align: center;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">"
<link rel="stylesheet" href="meu_css/meustyles.css">
</head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');
</script>
<body>
<div class= "container">
<div class="title"><img src="img_meu/Header%20PGIMS3.png"></div>
<div class="navigation">
<ul>
<li> Officials
<!--<ul>
<li class="has-sub"> Submenu 1.1
<ul>
<li>Submenu 1.1.1</li>
<li class="has-sub">Submenu 1.1.2
<ul>
<li>Submenu 1.1.2.1</li>
<li>Submenu 1.1.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Submenu 1.2</li>
</ul> -->
</li>
<li class="has-sub"> Workshops
<ul>
<li>Faculty programmes</li>
<li>Postgraduate programmes</li>
<li>CME's/sensitization Programmes</li>
</ul>
</li>
<li> Contact Us
<!--<ul>
<li>Submenu 3.1</li>
<li>Submenu 3.2</li>
</ul> -->
</li>
</ul>
</div>
<div class="contentArea">
<div>
<div class="heading1">Medical Education Unit</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_meu/imgMeu1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_meu/imgMeu2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_meu/imgMeu3.jpg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div><marquee style=" color:blue;font-family:sans-serif;font-size:1.25vw;background-color: #f9f6e3">This page is for information only and is under construction</marquee></div>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
</script>
<div style="overflow-x:auto;">
<div >
<table id = "officials" >
<caption style="font-size:2vw;">Officials</caption>
<tr>
<th class="No">S.No</th>
<th>Name</th>
<th>Designation</th>
</tr>
</tr>
</table>
</div>
</div>
<div>
<table>
<caption style="font:2vw;">Workshops</caption>
<tr>
<th id="facDev">Faculty Development Programmes</th>
</tr>
<tr><td>Thesis writing & Research methodology by team of UCMS, New Delhi organized from 11th -13th August 2015 at Pt. B D Sharma Post Graduate Institute of Medical Sciences, UHS, Rohtak</td></tr>
<tr><td>1st Revised Basic Course Workshop in Medical Education Technologies organized under the aegis of MCI Regional Centre for Medical Education Technologies, Maulana Azad Medical College, New Delhi at Pt. B D Sharma Post Graduate Institute of Medical Sciences, UHS, Rohtak from 17-19 April 2017.</td></tr>
<tr><td>2nd Revised Basic Course Workshop in Medical Education Technologies organized under the aegis of MCI Regional Centre for Medical Education Technologies, Maulana Azad Medical College, New Delhi at Pt. B D Sharma Post Graduate Institute of Medical Sciences, UHS, Rohtak from 27-29 November 2017.</td></tr>
<tr><td>3rd Revised Basic Course Workshop in Medical Education Technologies organized under the aegis of MCI Regional Centre for Medical Education Technologies, Maulana Azad Medical College, New Delhi at Pt. B D Sharma Post Graduate Institute of Medical Sciences, UHS, Rohtak from 26-28 March 2018.</td></tr>
</table>
</div>
<div>
<table>
<tr>
<th id="pgOri">Postgraduate orientation programmes</th>
</tr>
<tr><td>“Thesis protocol writing” workshop for 1st yr MD/MS/MDS (Admn. Year 2017) was held from 4th – 9th September 2017. </td></tr>
<tr><td>“Thesis Protocol Writing” for the 1st year M.D./M.S. residents (Admission year 2018) was held 6th – 11th August, 2018.</td></tr>
</table>
</div>
<div id="contact">
<p class= heading1>Contact</p>
<h3>Dr.Sarita Maggu, Dean, PGIMS</h3>
<p>tel:[phone]</p>
<h3>Dr.Sujata Sethi, Sr.Prof Psychiatry, PGIMS</h3>
<p>tel:[phone]</p>
</div>
</div>
<div class="rightBar"></div>
<div class="footerArea">
<p><strong>Page Designed and Developed by Dept of Information Technology,Pt.B.Sharma University of Health Sciences, Rohtak. &copy sukhdevchandla#gmail.com</strong></p>
</div>
</div>
</body>
</html>

Answer 1

The problem is that your rows, always has a size of 1fr (one fraction) and it will be changed across you resize your viewport.
You can try not define grid-template-rows, and let that the size of the rows be automatic.
In resume, remove or comment this code:
grid-template-rows:repeat(8, 1fr);