Как ограничить размер строки CSS Grid?

Question

У меня есть макет CSS Grid, в котором размер верхней строки увеличивается при уменьшении размера порта просмотра, а это не то, что мне нужно.

Я не знаю, какие изменения мне нужно сделать, чтобы размер верхнего ряда не увеличивался.

/* 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> <a href="#officials">Officials</a>
      <!--<ul>
        <li class="has-sub"> <a href="#">Submenu 1.1</a>
          <ul>
            <li><a href="#">Submenu 1.1.1</a></li>
            <li class="has-sub"><a href="#">Submenu 1.1.2</a>
              <ul>
                <li><a href="#">Submenu 1.1.2.1</a></li>
                <li><a href="#">Submenu 1.1.2.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Submenu 1.2</a></li>
      </ul> -->
    </li>
    <li class="has-sub"> <a href="#">Workshops</a>
      <ul>
        <li><a href="#facDev">Faculty programmes</a></li>
        <li><a href="#pgOri">Postgraduate programmes</a></li>
        <li><a href="#">CME's/sensitization Programmes</a></li>
      </ul>
    </li>
    <li> <a href="#contact">Contact Us</a>
      <!--<ul>
        <li><a href="#">Submenu 3.1</a></li>
        <li><a href="#">Submenu 3.2</a></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)">&#10094;</a>
                  <a class="next" onclick="plusSlides(1)">&#10095;</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:7988234270</p>
        <h3>Dr.Sujata Sethi, Sr.Prof Psychiatry, PGIMS</h3>
        <p>tel:9466749009</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

Проблема в том, что ваши строки всегда имеют размер 1fr (одна дробь), и они будут меняться при изменении размера области просмотра.

Вы можете попытаться не определять сетку-шаблон-строки, и пусть размер строк будет автоматическим.

В резюме удалите или прокомментируйте этот код:

grid-template-rows:repeat(8, 1fr);