Можно ли выставить изображения в html, чтобы они были на 1 экране?

Question

fapchat @fapchat

HTML
CSS

Можно ли выставить изображения в html, чтобы они были на 1 экране?

Как сделать так, чтобы 4 изображения были на 1 экране?И вместе с текстом выводились областью в страницу браузера?

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Landingpage</title>
    <link rel="stylesheet" href="./css/master.css">
  </head>
  <body>
    <header>
      <div class="">
        <h1 class="upper" id="right"><a href="#">мы продаём воздух!</a></h1>
        </div>

        <nav class="grid">

<div >
  <h2><a href="#">О пользе воздуха для организма</a></h2>
  <p class="coffee">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div >
  <h2><a href="#">Почему воздух стоит брать именно у нас?</a></h2>
  <p class="coffee">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div >
  <h2><a href="#">Почему именно высокогорный воздух так хорош?</a></h2>
  <p class="coffee">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
      </nav>

    </header>


<!-- <section>
  <div class="">
    <h2>Воздух очень важен для нашего организма!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

   <div id="img">
     <img src="https://tion.ru/wp-content/uploads/2017/08/walking3.jpg" alt="">
   </div>
</section> -->
 <!-- <section class="grid grid-1">
  <div class="">
    <h2>У нас самый качественный и самый высоко-горный возудух!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

   <div id="img">
     <img src="https://tion.ru/wp-content/uploads/2017/08/walking3.jpg" alt="">
   </div>
</section> -->

<section class="grid grid-1">
 <div class="">
   <h2>Много статей в интеренете посвящено полезности высокогорного воздуха, однако в этой статье мы собираемя освятить лишь важнейшие факты</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>

  <div id="img">
    <img src="https://bit.ua/wp-content/uploads/2017/12/5a2586ab3339b038248b45ab-1136-852.png" alt="">
  </div>
  <div id="img">
    <img src="https://asiamountains.net/upload/slide/slide-1960x857-07.jpg" alt="">
  </div>
  <div id="img">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/%D0%93%D1%80%D0%B0%D0%BC%D0%BF%D0%B8%D0%B0%D0%BD%D1%81%D0%BA%D0%B8%D0%B5_%D0%B3%D0%BE%D1%80%D1%8B.jpg" alt="">
  </div>
</section>

<footer class="grid" id="blackBack">
<div class="">
  <ul>
  					<li id="a"><a id="aInLi" href="#">Account</a></li>
  					<li id="a"><a id="aInLi" href="#">Redeem Gift Cards</a></li>
  					<li id="a"><a id="aInLi" href="#">Privacy</a></li>
  					<li id="a"><a id="aInLi" href="#">Speed Test</a></li>
  				</ul>
</div>
  <div class="">
    <ul>
    					<li id="a"><a id="aInLi" href="#">Account</a></li>
    					<li id="a"><a id="aInLi" href="#">Redeem Gift Cards</a></li>
    					<li id="a"><a id="aInLi" href="#">Privacy</a></li>
    					<li id="a"><a id="aInLi" href="#">Speed Test</a></li>
    				</ul>
  </div>
  <div class="">
    <ul>
          <li id="a" ><a id="aInLi" href="#">Account</a></li>
          <li id="a"><a id="aInLi" href="#">Redeem Gift Cards</a></li>
          <li id="a"><a id="aInLi" href="#">Privacy</a></li>
          <li id="a"><a id="aInLi" href="#">Speed Test</a></li>
        </ul>
  </div>
</footer>
<script src="./js/main.js"></script>
  </body>
</html>

body{margin: 0; padding: 0;}
header{
  background:#35424a;
  color:#ffffff;
  padding-top:15px;
  min-height:70px;
}
header nav{background: black;}
.upper{font-size: 32px;
padding-bottom: 20px;

text-transform: uppercase;
}
#right{
  padding-left: 40%;
}
.grid{display:grid;
      /* grid-template-columns:1fr 1fr 1fr;*/
      grid-template-columns:repeat(3, 1fr);
      grid-gap:1em;
      /* grid-auto-rows:100px; */
      grid-auto-rows: minmax(100px, auto);;
align-items: center;
  grid-gap: 1rem;
text-align: center;}
.grid-1{  grid-template-columns:repeat(2, 1fr);
}

a{  color:#ffffff;
  text-decoration:none;
  padding: 10px;
  background: DarkOrange	;
  border-radius: 10px;
}

#a{color:white;
  padding: 10px;
line-height: 1em;
background: none;
}
#aInLi{text-decoration:none;
  background: none;
}
.coffee{color:Chocolate;
font-family: segoe script;
}
h1, h2{font-weight: 700;
font-family: fantasy;}

 a:hover, #a:hover{background: black;
   color:silver;
}
ul{	list-style: none;}
#blackBack{background: DimGrey;}
section{background: silver;
padding-top: 20px;
}
img{margin-bottom: 0;}