Advertisement
Guest User

Untitled

a guest
Jun 19th, 2019
216
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.94 KB | None | 0 0
  1. .grid {
  2. display: grid;
  3. grid-template-columns: 45% 10% 45%;
  4. }
  5.  
  6. .column-0 { grid-column-start: 1; grid-column-end: 2;}
  7. .column-1 { grid-column-start: 3; grid-column-end: 4;}
  8. .row-0 { grid-row-start: 1; grid-row-end: 2;}
  9. .row-1 { grid-row-start: 2; grid-row-end: 3;}
  10. .row-2 { grid-row-start: 3; grid-row-end: 4;}
  11. .row-3 { grid-row-start: 4; grid-row-end: 5;}
  12. .row-4 { grid-row-start: 5; grid-row-end: 6;}
  13. .row-5 { grid-row-start: 6; grid-row-end: 7;}
  14. .row-6 { grid-row-start: 7; grid-row-end: 8;}
  15.  
  16. .grid > * {
  17. padding: 0.25em;
  18. border: 1px solid #eee;
  19. margin: 0 0 30px;
  20. position: relative;
  21. }
  22.  
  23. .line-down:after {
  24. content: '';
  25. position:absolute;
  26. top:calc(100% + 5px);
  27. height: 20px;
  28. left:50%;
  29. width:4px;
  30. margin-left:-2px;
  31. background:pink;
  32. border-radius:2px;
  33. }
  34. .column-1.row-1:after {
  35. background: #00ff00;
  36. height: calc(20px * 10);
  37. }
  38.  
  39. .column-1.row-1:after {
  40. background: #00ff00;
  41. height: calc(20px * 10);
  42. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement