css-grid.css 1.3 KB

12345678910111213141516171819202122232425
  1. .wrapper {
  2. display: grid;
  3. grid-template-columns: [col1-start] 9fr [col1-end] 10px [col2-start] 3fr [col2-end];
  4. grid-template-rows: auto;
  5. }
  6. .wrapper {
  7. display: grid;
  8. grid-template-columns: [left-bound] auto [container-left] 1170px [container-right] auto [right-bound];
  9. grid-template-rows: [row-1-start] 140px [row-2-start] 390px [row-3-start] 200px [row-4-start] 120px [row-5-start] 120px [row-6-start] 120px;
  10. }
  11. .container-12 {
  12. z-index: 20;
  13. display: grid;
  14. grid-column: container-left / span 1;
  15. grid-row: 2;
  16. grid-template-columns: [wrapcol-1-start] 1fr [wrapcol-1-end] 15px [wrapcol-2-start] 1fr [wrapcol-2-end] 15px [wrapcol-3-start] 1fr [wrapcol-3-end] 15px [wrapcol-4-start] 1fr [wrapcol-4-end] 15px [wrapcol-5-start] 1fr [wrapcol-5-end] 15px [wrapcol-6-start] 1fr [wrapcol-6-end] 15px [wrapcol-7-start] 1fr [wrapcol-7-end] 15px [wrapcol-8-start] 1fr [wrapcol-8-end] 15px [wrapcol-9-start] 1fr [wrapcol-9-end] 15px [wrapcol-10-start] 1fr [wrapcol-10-end] 15px [wrapcol-11-start] 1fr [wrapcol-11-end] 15px [wrapcol-12-start] 1fr [wrapcol-12-end];
  17. grid-template-rows: repeat(14, [gutter] 10px [row] 60px);
  18. }
  19. .wrapper {
  20. display: grid;
  21. grid-template-columns: 9fr 1.875em 3fr;
  22. grid-template-rows: auto;
  23. grid-template-areas: "header header header" "content . sidebar" "footer footer footer";
  24. }