Advertisement
8u

css layout html

8u
Aug 21st, 2021
120
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 0.80 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <title>testing</title>
  3. <style>
  4. body {
  5.   display: grid;
  6.   grid-template-areas:
  7.     "header header header"
  8.     "nav article ads"
  9.     "footer footer footer";
  10.   grid-template-rows: 60px 1fr 60px;
  11.   grid-template-columns: 20% 1fr 15%;
  12.   grid-gap: 10px;
  13.   height: 100vh;
  14.   margin: 0;
  15.   }
  16. #pageHeader {
  17.   grid-area: header;
  18. }
  19.  
  20. #pageFooter {
  21.   grid-area: footer;
  22. }
  23. #mainArticle {
  24.   grid-area: article;      
  25.   }
  26. #mainNav {
  27.   grid-area: nav;
  28.   }
  29. #siteAds {
  30.   grid-area: ads;
  31.   }
  32. header, footer, article, nav, div {
  33.   padding: 20px;
  34.   background: gold;
  35. }
  36. </style>
  37. <body>
  38.   <header id="pageHeader">Header</header>
  39.   <article id="mainArticle">Article</article>
  40. <nav id="mainNav">Nav</nav>
  41.   <div id="siteAds">Ads</div>
  42.   <footer id="pageFooter">Footer</footer>
  43. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement