314 lines
14 KiB
CSS
314 lines
14 KiB
CSS
/* =================================================================
|
|
CSS GRID UTILITIES
|
|
================================================================= */
|
|
|
|
/* Grid containers */
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
|
|
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
|
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
|
|
|
/* Grid column span utilities (1-12 columns for 12-column system) */
|
|
.col-span-1 { grid-column: span 1 / span 1; }
|
|
.col-span-2 { grid-column: span 2 / span 2; }
|
|
.col-span-3 { grid-column: span 3 / span 3; }
|
|
.col-span-4 { grid-column: span 4 / span 4; }
|
|
.col-span-5 { grid-column: span 5 / span 5; }
|
|
.col-span-6 { grid-column: span 6 / span 6; }
|
|
.col-span-7 { grid-column: span 7 / span 7; }
|
|
.col-span-8 { grid-column: span 8 / span 8; }
|
|
.col-span-9 { grid-column: span 9 / span 9; }
|
|
.col-span-10 { grid-column: span 10 / span 10; }
|
|
.col-span-11 { grid-column: span 11 / span 11; }
|
|
.col-span-12 { grid-column: span 12 / span 12; }
|
|
|
|
/* Starting column utilities for offset positioning */
|
|
.col-start-1 { grid-column-start: 1; }
|
|
.col-start-2 { grid-column-start: 2; }
|
|
.col-start-3 { grid-column-start: 3; }
|
|
.col-start-4 { grid-column-start: 4; }
|
|
.col-start-5 { grid-column-start: 5; }
|
|
.col-start-6 { grid-column-start: 6; }
|
|
.col-start-7 { grid-column-start: 7; }
|
|
.col-start-8 { grid-column-start: 8; }
|
|
.col-start-9 { grid-column-start: 9; }
|
|
.col-start-10 { grid-column-start: 10; }
|
|
.col-start-11 { grid-column-start: 11; }
|
|
.col-start-12 { grid-column-start: 12; }
|
|
|
|
/* Ending column utilities */
|
|
.col-end-1 { grid-column-end: 1; }
|
|
.col-end-2 { grid-column-end: 2; }
|
|
.col-end-3 { grid-column-end: 3; }
|
|
.col-end-4 { grid-column-end: 4; }
|
|
.col-end-5 { grid-column-end: 5; }
|
|
.col-end-6 { grid-column-end: 6; }
|
|
.col-end-7 { grid-column-end: 7; }
|
|
.col-end-8 { grid-column-end: 8; }
|
|
.col-end-9 { grid-column-end: 9; }
|
|
.col-end-10 { grid-column-end: 10; }
|
|
.col-end-11 { grid-column-end: 11; }
|
|
.col-end-12 { grid-column-end: 12; }
|
|
|
|
/* Grid row spans */
|
|
.row-span-1 { grid-row: span 1 / span 1; }
|
|
.row-span-2 { grid-row: span 2 / span 2; }
|
|
.row-span-3 { grid-row: span 3 / span 3; }
|
|
.row-span-4 { grid-row: span 4 / span 4; }
|
|
|
|
/* Grid flow direction */
|
|
.grid-flow-row { grid-auto-flow: row; }
|
|
.grid-flow-col { grid-auto-flow: column; }
|
|
.grid-flow-dense { grid-auto-flow: dense; }
|
|
.grid-flow-row-dense { grid-auto-flow: row dense; }
|
|
.grid-flow-col-dense { grid-auto-flow: column dense; }
|
|
|
|
/* Grid alignment */
|
|
.place-items-center {
|
|
place-items: center;
|
|
}
|
|
|
|
.items-start { align-items: start; }
|
|
.items-end { align-items: end; }
|
|
.items-center { align-items: center; }
|
|
.items-baseline { align-items: baseline; }
|
|
.items-stretch { align-items: stretch; }
|
|
|
|
.justify-start { justify-content: start; }
|
|
.justify-end { justify-content: end; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.justify-around { justify-content: space-around; }
|
|
.justify-evenly { justify-content: space-evenly; }
|
|
|
|
.justify-items-start { justify-items: start; }
|
|
.justify-items-end { justify-items: end; }
|
|
.justify-items-center { justify-items: center; }
|
|
.justify-items-stretch { justify-items: stretch; }
|
|
|
|
.place-content-center {
|
|
place-content: center;
|
|
}
|
|
|
|
.place-content-start { place-content: start; }
|
|
.place-content-end { place-content: end; }
|
|
.place-content-stretch { place-content: stretch; }
|
|
|
|
/* Grid gap and spacing system */
|
|
.gap-1 { gap: var(--spacing-1); }
|
|
.gap-2 { gap: var(--spacing-2); }
|
|
.gap-3 { gap: var(--spacing-3); }
|
|
.gap-4 { gap: var(--spacing-4); }
|
|
.gap-5 { gap: var(--spacing-5); }
|
|
.gap-6 { gap: var(--spacing-6); }
|
|
.gap-8 { gap: var(--spacing-8); }
|
|
.gap-10 { gap: var(--spacing-10); }
|
|
.gap-12 { gap: var(--spacing-12); }
|
|
.gap-16 { gap: var(--spacing-16); }
|
|
|
|
/* Horizontal gap utilities */
|
|
.gap-x-1 { column-gap: var(--spacing-1); }
|
|
.gap-x-2 { column-gap: var(--spacing-2); }
|
|
.gap-x-3 { column-gap: var(--spacing-3); }
|
|
.gap-x-4 { column-gap: var(--spacing-4); }
|
|
.gap-x-5 { column-gap: var(--spacing-5); }
|
|
.gap-x-6 { column-gap: var(--spacing-6); }
|
|
|
|
/* Vertical gap utilities */
|
|
.gap-y-1 { row-gap: var(--spacing-1); }
|
|
.gap-y-2 { row-gap: var(--spacing-2); }
|
|
.gap-y-3 { row-gap: var(--spacing-3); }
|
|
.gap-y-4 { row-gap: var(--spacing-4); }
|
|
.gap-y-5 { row-gap: var(--spacing-5); }
|
|
.gap-y-6 { row-gap: var(--spacing-6); }
|
|
|
|
/* Auto-fit and auto-fill responsive grids */
|
|
.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
|
|
.grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
|
|
|
|
.grid-auto-fit-sm {
|
|
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
|
}
|
|
|
|
.grid-auto-fill-md {
|
|
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
|
}
|
|
|
|
.grid-auto-fit-lg {
|
|
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
|
}
|
|
|
|
/* =================================================================
|
|
RESPONSIVE GRID VARIATION CLASSES
|
|
================================================================= */
|
|
|
|
/* Small breakpoint (640px and up) */
|
|
@media (min-width: 640px) {
|
|
.sm\:grid {
|
|
display: grid;
|
|
}
|
|
|
|
.sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
|
.sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
|
.sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
|
.sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
|
.sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
|
.sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
|
.sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
|
.sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
|
|
|
.sm\:col-span-1 { grid-column: span 1 / span 1; }
|
|
.sm\:col-span-2 { grid-column: span 2 / span 2; }
|
|
.sm\:col-span-3 { grid-column: span 3 / span 3; }
|
|
.sm\:col-span-4 { grid-column: span 4 / span 4; }
|
|
.sm\:col-span-5 { grid-column: span 5 / span 5; }
|
|
.sm\:col-span-6 { grid-column: span 6 / span 6; }
|
|
.sm\:col-span-7 { grid-column: span 7 / span 7; }
|
|
.sm\:col-span-8 { grid-column: span 8 / span 8; }
|
|
.sm\:col-span-9 { grid-column: span 9 / span 9; }
|
|
.sm\:col-span-10 { grid-column: span 10 / span 10; }
|
|
.sm\:col-span-11 { grid-column: span 11 / span 11; }
|
|
.sm\:col-span-12 { grid-column: span 12 / span 12; }
|
|
}
|
|
|
|
/* Medium breakpoint (768px and up) */
|
|
@media (min-width: 768px) {
|
|
.md\:grid {
|
|
display: grid;
|
|
}
|
|
|
|
.md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
|
.md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
|
.md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
|
.md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
|
.md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
|
.md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
|
.md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
|
.md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
|
|
|
.md\:col-span-1 { grid-column: span 1 / span 1; }
|
|
.md\:col-span-2 { grid-column: span 2 / span 2; }
|
|
.md\:col-span-3 { grid-column: span 3 / span 3; }
|
|
.md\:col-span-4 { grid-column: span 4 / span 4; }
|
|
.md\:col-span-5 { grid-column: span 5 / span 5; }
|
|
.md\:col-span-6 { grid-column: span 6 / span 6; }
|
|
.md\:col-span-7 { grid-column: span 7 / span 7; }
|
|
.md\:col-span-8 { grid-column: span 8 / span 8; }
|
|
.md\:col-span-9 { grid-column: span 9 / span 9; }
|
|
.md\:col-span-10 { grid-column: span 10 / span 10; }
|
|
.md\:col-span-11 { grid-column: span 11 / span 11; }
|
|
.md\:col-span-12 { grid-column: span 12 / span 12; }
|
|
}
|
|
|
|
/* Large breakpoint (1024px and up) */
|
|
@media (min-width: 1024px) {
|
|
.lg\:grid {
|
|
display: grid;
|
|
}
|
|
|
|
.lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
|
.lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
|
.lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
|
.lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
|
.lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
|
.lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
|
.lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
|
.lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
|
|
|
.lg\:col-span-1 { grid-column: span 1 / span 1; }
|
|
.lg\:col-span-2 { grid-column: span 2 / span 2; }
|
|
.lg\:col-span-3 { grid-column: span 3 / span 3; }
|
|
.lg\:col-span-4 { grid-column: span 4 / span 4; }
|
|
.lg\:col-span-5 { grid-column: span 5 / span 5; }
|
|
.lg\:col-span-6 { grid-column: span 6 / span 6; }
|
|
.lg\:col-span-7 { grid-column: span 7 / span 7; }
|
|
.lg\:col-span-8 { grid-column: span 8 / span 8; }
|
|
.lg\:col-span-9 { grid-column: span 9 / span 9; }
|
|
.lg\:col-span-10 { grid-column: span 10 / span 10; }
|
|
.lg\:col-span-11 { grid-column: span 11 / span 11; }
|
|
.lg\:col-span-12 { grid-column: span 12 / span 12; }
|
|
}
|
|
|
|
/* Extra Large breakpoint (1280px and up) */
|
|
@media (min-width: 1280px) {
|
|
.xl\:grid {
|
|
display: grid;
|
|
}
|
|
|
|
.xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
.xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
|
.xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
|
.xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
|
.xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
|
.xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
|
.xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
|
.xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
|
.xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
|
|
|
.xl\:col-span-1 { grid-column: span 1 / span 1; }
|
|
.xl\:col-span-2 { grid-column: span 2 / span 2; }
|
|
.xl\:col-span-3 { grid-column: span 3 / span 3; }
|
|
.xl\:col-span-4 { grid-column: span 4 / span 4; }
|
|
.xl\:col-span-5 { grid-column: span 5 / span 5; }
|
|
.xl\:col-span-6 { grid-column: span 6 / span 6; }
|
|
.xl\:col-span-7 { grid-column: span 7 / span 7; }
|
|
.xl\:col-span-8 { grid-column: span 8 / span 8; }
|
|
.xl\:col-span-9 { grid-column: span 9 / span 9; }
|
|
.xl\:col-span-10 { grid-column: span 10 / span 10; }
|
|
.xl\:col-span-11 { grid-column: span 11 / span 11; }
|
|
.xl\:col-span-12 { grid-column: span 12 / span 12; }
|
|
}
|
|
|
|
/* 2XL breakpoint (1536px and up) */
|
|
@media (min-width: 1536px) {
|
|
.2xl\:grid {
|
|
display: grid;
|
|
}
|
|
|
|
.2xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
.2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
|
.2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
|
.2xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
|
.2xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
|
.2xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
|
.2xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
|
.2xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
|
.2xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
|
|
|
.2xl\:col-span-1 { grid-column: span 1 / span 1; }
|
|
.2xl\:col-span-2 { grid-column: span 2 / span 2; }
|
|
.2xl\:col-span-3 { grid-column: span 3 / span 3; }
|
|
.2xl\:col-span-4 { grid-column: span 4 / span 4; }
|
|
.2xl\:col-span-5 { grid-column: span 5 / span 5; }
|
|
.2xl\:col-span-6 { grid-column: span 6 / span 6; }
|
|
.2xl\:col-span-7 { grid-column: span 7 / span 7; }
|
|
.2xl\:col-span-8 { grid-column: span 8 / span 8; }
|
|
.2xl\:col-span-9 { grid-column: span 9 / span 9; }
|
|
.2xl\:col-span-10 { grid-column: span 10 / span 10; }
|
|
.2xl\:col-span-11 { grid-column: span 11 / span 11; }
|
|
.2xl\:col-span-12 { grid-column: span 12 / span 12; }
|
|
}
|