Где я могу добавить минимум восемь в области шаблона сетки - PullRequest
Новая
       6

Где я могу добавить минимум восемь в области шаблона сетки

0 голосов
/ 01 марта 2020

может кто-нибудь помочь мне, пожалуйста,

Я должен сделать упражнение, в котором говорится, что я должен добавить "минимальную высоту" для верхнего и нижнего колонтитула, но я не знаю, где я могу поставить это точно, в сетке-шаблоне-строках? или по их указанному c элементу? Кроме того, я хотел бы, чтобы эта страница реагировала на медиазапросы с разрешением 640 пикселей, вы можете открывать изображения в ссылках для более подробного объяснения. Заранее благодарю. 

* {
  box-sizing: border-box; }

body{
  margin: 0;
  padding: 0;
  font-family: verdana sans-serif;
  font-size: 12pt;
  text-align: justify;
  background-color:	rgb(255,250,205);
}


#container {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: minmax(150px, 250px) auto minmax(150px, 250px);
  grid-template-rows:  minmax(20px, auto) 800  minmax(20px, auto);/*1fr 5fr 1fr*/
  grid-gap: 5px;

  grid-template-areas: "header header header"
                       "nav article aside"
                       "footer footer footer";
}

#header,
#nav,
#article,
#aside,
#footer {

  border-radius: 5px;
  /*background-color: blue);*/
  padding: 1em;
}

header {
  background-color: blue;
  grid-area: header;
}
nav {
  background-color: blue;
  grid-area: nav;
}
article {
  background-color: blue;
  grid-area: article;
}
aside {
  background-color: blue;
  grid-area: aside;
}
footer {
  background-color: blue;
  grid-area: footer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title></title>
  </head>
  <body id="container">

    <header id="header">  <h2>Header</h2> </header>


    <nav id="nav">   <h1>Menu</h1>
      <ul>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
      </ul>
    </nav>

    <article id="article">
      <h1>Article</h1>
    
    </article>

      <aside id="aside">  <h1>Aside</h1></aside>

    <footer id="footer">  <h2>Footer<h2></footer>

</html>
...