_grid.css 1013 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. /* resources/css/layout/_grid.css
  2. 全站断点定义 + 通用栏容器。
  3. 各栏目三栏/两栏 grid 在此定义基础变量,具体 grid-template 在各 module 实现。
  4. */
  5. /* ── 断点 token(与 Tabler Bootstrap 保持一致) ── */
  6. :root {
  7. --bp-sm: 576px;
  8. --bp-md: 768px;
  9. --bp-lg: 992px;
  10. --bp-xl: 1200px;
  11. }
  12. /* ── 通用两栏容器 ── */
  13. .layout-2col {
  14. display: grid;
  15. grid-template-columns: 220px 1fr;
  16. gap: 1.5rem;
  17. align-items: start;
  18. padding-top: 1.5rem;
  19. padding-bottom: 3rem;
  20. }
  21. /* ── 通用三栏容器 ── */
  22. .layout-3col {
  23. display: grid;
  24. grid-template-columns: 200px 1fr 200px;
  25. gap: 1.5rem;
  26. align-items: start;
  27. padding-top: 1.5rem;
  28. padding-bottom: 3rem;
  29. }
  30. /* ── 响应式降级 ── */
  31. @media (max-width: 992px) {
  32. .layout-3col {
  33. grid-template-columns: 180px 1fr;
  34. }
  35. }
  36. @media (max-width: 768px) {
  37. .layout-2col,
  38. .layout-3col {
  39. grid-template-columns: 1fr;
  40. }
  41. }