cornford-michael

reponsive CSSGrid page

Jan 29th, 2018
146
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
  6. <meta name="dcterms.created" content="Mon, 15 Jan 2018 00:09:05 GMT">
  7. <meta name="description" content="">
  8. <meta name="keywords" content="">
  9. <title></title>
  10. <style>
  11.  
  12. body {
  13. margin: 2vh;
  14. background-color: #d7f7f7;
  15. }
  16.  
  17. .wrapper {
  18. display: grid;
  19. grid-gap: 2vh;
  20. grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  21. background-color: #f7f7f7;
  22. color: #444;
  23. }
  24.  
  25. .box {
  26. background-color: white;
  27. color: black;
  28. border-radius: 5px;
  29. padding: 2vh;
  30. font-size: 150%;
  31.  
  32.  
  33. }
  34. .thin{height: 7vh; }
  35. .body{height: 53vh; }
  36.  
  37.  
  38. .a {
  39. grid-column: 1 / span 5;
  40. }
  41.  
  42. .c {
  43. grid-column: 1 ;
  44. grid-row: 2 ;
  45. }
  46. .d {
  47. grid-column: 2 / span 4;
  48. grid-row: 2 ;
  49. }
  50. .e {
  51. grid-column: 1 / span 5;
  52. grid-row: 3 ;
  53. }
  54.  
  55. .f {
  56. grid-column: 1 / span 5;
  57. grid-row: 4 ;
  58. }
  59.  
  60.  
  61.  
  62.  
  63.  
  64. </style>
  65. <!--[if IE]>
  66. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  67. <![endif]-->
  68. </head>
  69. <body>
  70. <div class="wrapper">
  71. <div class="box a thin">Height 7vh but 2vh padding</div>
  72. <div class="box c body">grid-gap: 2vh</div>
  73. <div class="box d body">Height 53vh but 2vh padding</div>
  74. <div class="box e thin">Height 7vh but 2vh padding</div>
  75. <div class="box f thin">Height 7vh but 2vh padding</div>
  76.  
  77. </div>
  78. </body>
  79. </html>
RAW Paste Data