grid1.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .content {
  8. display: flex;
  9. height: 800px;
  10. background-color: plum;
  11. flex-wrap: wrap;
  12. align-content: flex-start;
  13. }
  14. .row {
  15. display: flex;
  16. background-color: grey;
  17. height: 100px;
  18. width: 100%;
  19. margin-top: 5px;
  20. /*justify-content: space-between;*/
  21. }
  22. .row:last-child {
  23. height: 150px;
  24. }
  25. .one {
  26. flex: 1;
  27. height: 90px;
  28. background-color: #0a6aa1;
  29. margin: 5px;
  30. }
  31. .last {
  32. flex: 1;
  33. height: 140px;
  34. background-color: #0a6aa1;
  35. margin: 5px;
  36. }
  37. .Grid-cell {
  38. flex: 1;
  39. height: 200px;
  40. }
  41. .Grid-cell.first {
  42. background-color: #0d8ddb;
  43. }
  44. .Grid-cell.second {
  45. background-color: #FFB5BF;
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <div class="content">
  51. <div class="row">
  52. <div class="one"></div>
  53. <div class="one"></div>
  54. </div>
  55. <div class="row">
  56. <div class="one"></div>
  57. <div class="one"></div>
  58. <div class="one"></div>
  59. </div>
  60. <div class="row">
  61. <div class="one"></div>
  62. <div class="one"></div>
  63. <div class="one"></div>
  64. <div class="one"></div>
  65. </div>
  66. <div class="row">
  67. <div class="last"></div>
  68. <div class="last"></div>
  69. </div>
  70. </div>
  71. </body>
  72. </html>