| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- /* resources/css/layout/_grid.css
- 全站断点定义 + 通用栏容器。
- 各栏目三栏/两栏 grid 在此定义基础变量,具体 grid-template 在各 module 实现。
- */
- /* ── 断点 token(与 Tabler Bootstrap 保持一致) ── */
- :root {
- --bp-sm: 576px;
- --bp-md: 768px;
- --bp-lg: 992px;
- --bp-xl: 1200px;
- }
- /* ── 通用两栏容器 ── */
- .layout-2col {
- display: grid;
- grid-template-columns: 220px 1fr;
- gap: 1.5rem;
- align-items: start;
- padding-top: 1.5rem;
- padding-bottom: 3rem;
- }
- /* ── 通用三栏容器 ── */
- .layout-3col {
- display: grid;
- grid-template-columns: 200px 1fr 200px;
- gap: 1.5rem;
- align-items: start;
- padding-top: 1.5rem;
- padding-bottom: 3rem;
- }
- /* ── 响应式降级 ── */
- @media (max-width: 992px) {
- .layout-3col {
- grid-template-columns: 180px 1fr;
- }
- }
- @media (max-width: 768px) {
- .layout-2col,
- .layout-3col {
- grid-template-columns: 1fr;
- }
- }
|