Advertisement
Guest User

Untitled

a guest
May 20th, 2019
73
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.45 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .inner-block {
  6. display: grid;
  7.  
  8. grid-template-columns: 1fr 1fr 1fr;
  9. }
  10.  
  11. .inner-block--left {
  12. grid-column: 1;
  13.  
  14. align-self: center;
  15. }
  16.  
  17. .inner-block--right {
  18. grid-column: 3;
  19.  
  20. align-self: center;
  21. }
  22.  
  23. .inner-block-center {
  24. grid-column: 2;
  25.  
  26. display: grid;
  27. grid-template-columns: 1fr 1fr;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div class="inner-block">
  33. <div class="inner-block--left">left</div>
  34. <div class="inner-block-center">
  35. <div class="inner-block-center--element">center-element</div>
  36. <div class="inner-block-center--element">center-element</div>
  37. <div class="inner-block-center--element">center-element</div>
  38. <div class="inner-block-center--element">center-element</div>
  39. <div class="inner-block-center--element">center-element</div>
  40. <div class="inner-block-center--element">center-element</div>
  41. <div class="inner-block-center--element">center-element</div>
  42. <div class="inner-block-center--element">center-element</div>
  43. </div>
  44. <div class="inner-block--right">right</div>
  45. </div>
  46. </body>
  47. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement